auth jquery 注销 jquery用户注册验证

转载

mob64ca140c3859 2023-08-31 19:49:12

文章标签 auth jquery 注销 jquery 表单密码邮箱 文章分类 jQuery 前端开发

注册页面功能实现:

验证会员名密码不能为空或者包含空格，并且保证长度至少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、效果图片

auth jquery 注销 jquery用户注册验证_表单

auth jquery 注销 jquery用户注册验证_表单_02

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>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。