锋利的jquery表单验证

最新推荐文章于 2024-10-21 09:17:12 发布

菲一菲

最新推荐文章于 2024-10-21 09:17:12 发布

阅读量243

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_37203608/article/details/70892927

本文介绍了一个使用jQuery实现的表单验证实例。该实例包括用户名和邮箱的验证，并通过不同的颜色反馈验证结果。当输入不满足条件时，显示红色错误提示；当输入正确时，则显示绿色成功提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script src="jquery-1.10.2.js"></script>
    <style>
        .formtips{
            width: 80px;
            height: 20px;
        }
        .onError{
            color: red;
        }
        .onSuccess{
            color: green;
        }
    </style>
</head>
<body>
<form method="post" action="">
    <div class="int">
       <label for="username">用户名：</label>
        <input type="text" id="username" class="required">
    </div>
    <div class="int">
        <label for="email">邮箱：</label>
        <input type="text" id="email" class="required">
    </div>
    <div class="int">
        <lable for="personinfo">个人资料：</lable>
        <input type="text" id="personinfo" class="required">
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send">
        <input type="reset" id="res">
    </div>
</form>
<script>
    $(function () {
        $("form :input").blur(function () {
            var $parent=$(this).parent();
            $parent.find(".formtips").remove();
            //验证用户名
            if($(this).is("#username")){
                if(this.value==""||this.value.length<6){
                    var errorMsg="请输入6位用户名";
                    $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else {
                    var okMsg="输入正确";
                    $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
            };
            //验证邮箱
            if($(this).is("#email")){
                if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
                    var errorMsg="请输入正确的邮箱地址";
                    $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else {
                    var okMsg="输入正确";
                    $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
            }
        });

    })
</script>
</body>
</html>