JQuery实现表单验证(注册页面)

关注

原创最新推荐文章于 2026-05-11 11:48:03 发布 1.6w 阅读 AI 写同款· GEO 优化 ›

使用JQ完成注册页面（表单）的校验 1.步骤: 1.0:在页面加载时,执行3部分操作 1.1:第1部分-必填项 1.1.1:给form表单中所有的带"required"类名的input标签中,添加一个红色的*,表示必填项. 1.2:第2部分-获取焦点/失去焦点的校验 1.2.1:获得所有的输入项,为输入项添加一个blur事件. 1.2.2:获得当前元素的父元素(即触发blur函数的元素的父元素) 1.2.3:清除父元素中显示... 阅读详情

注册页面功能实现:

验证会员名密码不能为空或者包含空格，并且保证长度至少6位
验证邮箱符合规则，并且不能为空
重复密码要与密码一致

1.页面的样式

<form action="#">
    邮箱：<input type="text" name="email" id="email"><span id="email_msg"></span><br>
    用户名：<input type="text" name="username" id="username"><span id="username_msg"></span><br>
    密码：<input type="text" name="password" id="password"><span id="password_msg"></span><br>
    确认密码：<input type="text" name="repasswprd" id="repassword"><span id="repassword_msg"></span><br>
    <!-- onclick="return checkForm() 如果checkForm返回值是true，就提交表单，否则不提交表单-->
    <input type="submit" name="submit" value="提交" onclick="return checkForm()"/>
</form>

2.编写JQuery代码进行表单验证

//是否为空
        function ifnull(txt){
            if(txt.length==0){
                return true;
            }
            var $reg=/\s+/;
            return $reg.test(txt);
        } 
//验证表单
function checkForm(){
    //验证邮箱
    if(ifnull($("#email").val())){
        $("#email_msg").html("邮箱不能为空！");
        return false;
    }else{
        var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
        if(!$reg.test($("#email").val())){
            $("#email_msg").html("邮箱格式错误！");
            return false;
        }
    }
    //验证用户名
    if(ifnull($("#username").val())){
        $("#username_msg").html("用户名不能为空！");
        return false;
    }else{
        var $reg=/^\w{6,}$/;
        if(!$reg.test($("#username").val())){
            $("#username_msg").html("用户名至少6位");
            return false;
        }
    }
    //验证密码
    if(ifnull($("#password").val())){
        $("#password_msg").html("密码不能为空");
        return false;
    }else{
        var $reg=/^\w{6,}$/;
        if(!$reg.test($("#password").val())){
            $("#password_msg").html("密码至少6位");
            return false;
        }
    }
    //确认密码是否为空
    if(ifnull($("#repassword").val())){
        $("#repassword_msg").html("请确认密码");
        return false;
    }
    //验证两次密码是否一致
    if($("#password").val()!=$("#repassword").val()){
        $("#repassword_msg").html("两次密码不一致");
        return false;
    }
    return true;
}

3、优化：Input标签失去焦点后进行验证

//在id为email的元素失去焦点时进行邮箱的验证
$("#email").blur(function(){
    if(ifnull($(this).val())){
        $("#email_msg").html("邮箱不能为空");
    }else{
        var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
        if(!$reg.test($("#email").val())){
            $("#email_msg").html("邮箱格式错误！");
        }else{
            $("#email_msg").html("√").CSS("color","green");
        }
    }
});
//在id为username的元素失去焦点时进行用户名的验证
$("#username").blur(function(){
    if(ifnull($(this).val())){
        $("#username_msg").html("用户名不能为空");
    }else{
        var $reg=/^\w{6,}$/;
        if(!$reg.test($("#username").val())){
            $("#username_msg").html("用户名至少要6位哦");
        }else{
            $("#username_msg").html("√");
        }
    }
});
//在id为password的元素失去焦点时进行密码的验证
$("#password").blur(function(){
    if(ifnull($(this).val())){
        $("#password_msg").html("用户名不能为空");
    }else{
        var $reg=/^\w{6,}$/;
        if(!$reg.test($("#password").val())){
            $("#password_msg").html("密码至少要6位哦");
        }else{
            $("#password_msg").html("√");
        }
    }
});
//在id为repassword的元素失去焦点时进行密码的验证
$("#repassword").blur(function(){
    if(ifnull($(this).val())){
        $("#repassword_msg").html("请确认密码");
    }else{
        if($("#password").val()!=$("#repassword").val()){
            $("#repassword_msg").html("两次密码不一致");
        }else{
            $("#repassword_msg").html("√");
        }
    }
});

4、效果图片

5.全部代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQuery实现表单验证</title>
    </head>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <body>
        <form action="#">
            邮箱：<input type="text" name="email" id="email"><span id="email_msg"></span><br>
            用户名：<input type="text" name="username" id="username"><span id="username_msg"></span><br>
            密码：<input type="text" name="password" id="password"><span id="password_msg"></span><br>
            确认密码：<input type="text" name="repasswprd" id="repassword"><span id="repassword_msg"></span><br>
            <!-- onclick="return checkForm() 如果checkForm返回值是true，就提交表单，否则不提交表单-->
            <input type="submit" name="submit" value="提交" onclick="return checkForm()"/>
        </form>
    </body>
    <script type="text/javascript">
        //是否为空
        function ifnull(txt){
            if(txt.length==0){
                return true;
            }
            var $reg=/\s+/;
            return $reg.test(txt);
        } 
        //在id为email的元素失去焦点时进行邮箱的验证
        $("#email").blur(function(){
            if(ifnull($(this).val())){
                $("#email_msg").html("邮箱不能为空");
            }else{
                var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
                if(!$reg.test($("#email").val())){
                    $("#email_msg").html("邮箱格式错误！");
                }else{
                    $("#email_msg").html("√").CSS("color","green");
                }
            }
        });
        //在id为username的元素失去焦点时进行用户名的验证
        $("#username").blur(function(){
            if(ifnull($(this).val())){
                $("#username_msg").html("用户名不能为空");
            }else{
                var $reg=/^\w{6,}$/;
                if(!$reg.test($("#username").val())){
                    $("#username_msg").html("用户名至少要6位哦");
                }else{
                    $("#username_msg").html("√");
                }
            }
        });
        //在id为password的元素失去焦点时进行密码的验证
        $("#password").blur(function(){
            if(ifnull($(this).val())){
                $("#password_msg").html("用户名不能为空");
            }else{
                var $reg=/^\w{6,}$/;
                if(!$reg.test($("#password").val())){
                    $("#password_msg").html("密码至少要6位哦");
                }else{
                    $("#password_msg").html("√");
                }
            }
        });
        //在id为repassword的元素失去焦点时进行密码的验证
        $("#repassword").blur(function(){
            if(ifnull($(this).val())){
                $("#repassword_msg").html("请确认密码");
            }else{
                if($("#password").val()!=$("#repassword").val()){
                    $("#repassword_msg").html("两次密码不一致");
                }else{
                    $("#repassword_msg").html("√");
                }
            }
        });

        //验证表单
        function checkForm(){
            //验证邮箱
            if(ifnull($("#email").val())){
                $("#email_msg").html("邮箱不能为空！");
                return false;
            }else{
                var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
                if(!$reg.test($("#email").val())){
                    $("#email_msg").html("邮箱格式错误！");
                    return false;
                }
            }
            //验证用户名
            if(ifnull($("#username").val())){
                $("#username_msg").html("用户名不能为空！");
                return false;
            }else{
                var $reg=/^\w{6,}$/;
                if(!$reg.test($("#username").val())){
                    $("#username_msg").html("用户名至少6位");
                    return false;
                }
            }
            //验证密码
            if(ifnull($("#password").val())){
                $("#password_msg").html("密码不能为空");
                return false;
            }else{
                var $reg=/^\w{6,}$/;
                if(!$reg.test($("#password").val())){
                    $("#password_msg").html("密码至少6位");
                    return false;
                }
            }
            //确认密码是否为空
            if(ifnull($("#repassword").val())){
                $("#repassword_msg").html("请确认密码");
                return false;
            }
            //验证两次密码是否一致
            if($("#password").val()!=$("#repassword").val()){
                $("#repassword_msg").html("两次密码不一致");
                return false;
            }
            return true;
        }
    </script>
</html>