邮箱&&密码验证-原理

原理版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #myForm {
            width: 400px;
            padding: 20px;
            margin: 50px auto;
            border: 1px solid #eee;
        }

        input {
            margin: 20px 20px 20px 10px;
            padding: 5px 10px;
        }
    </style>
    <script src="../js/jquery.min.js"></script>
    <script>
        $(function () {
            var flag = false;
//            blur: 元素失去光标触发的事件；
            $("#txt").blur(function () {
                var re = /\w+@\w+(\.\w){1,3}/;
                if (re.test($(this).val())) {
                    $("span").eq(0).html("输入正确").css("color", "green");
                   flag1 = true;
                } else {
                    $("span").eq(0).html("格式错误").css("color", "red");
                    flag1 = false;
                }
            })
            $("#pwd").blur(function () {
//                ^: 在中括号里表示取反（排除）， 在中括号外表示从头开始；
//                $: 表示结尾。
                var re = /^\S{6,12}$/;
                if ( re.test($(this).val()) ) {
                    $("span").eq(1).html("输入正确").css("color", "green");
                    flag2 = true;
                } else {
                    $("span").eq(1).html("格式错误").css("color", "red");
                    flag2 = false;
                }
            })
            $(":submit").click( function () {
//                triggerHandler: 自动触发事件；
                $("#txt").triggerHandler("blur");
                $("#pwd").triggerHandler("blur");
                if ( flag1 == false || flag2 == false ) {
                    return false;
                }
            })
        })
    </script>
</head>
<body>
<form action="http://www.baidu.com" id="myForm">
    邮箱： <input type="text" id="txt"><span></span> <br>
    密码： <input type="password" name="" id="pwd"><span></span> <br>
    <input type="submit" value="提交">
</form>

</body>
</html>

升级适应版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ok {
            color: green;
        }

        .error {
            color: red;
        }
    </style>
    <script src="../js/jquery.min.js"></script>
    <script>
        $(function () {
            $("#user").blur(function () {
                var re = /\w+@\w+(\.\w+){1,3}$/;
                if ($(this).parent().find(".ok,.error").length > 0) {
                    $(this).parent().find(".ok,.error").remove();
                }
                if (re.test($(this).val())) {
                    $(this).parent().append("<span class='ok'>格式正确</span>");
                } else {
                    $(this).parent().append("<span class='error'>格式错误</span>");
                }
            });
            $("#pwd").blur(function () {
                var re = /\w{6,20}$/;
                if ($(this).parent().find(".ok,.error").length > 0) {
                    $(this).parent().find(".ok,.error").remove();
                }
                if (re.test($(this).val())) {
                    $(this).parent().append("<span class='ok'>格式正确</span>");
                } else {
                    $(this).parent().append("<span class='error'>格式错误</span>");
                }
            });
            $(":submit").click(function () {
                $("#user").triggerHandler("blur");
                $("#pwd").triggerHandler("blur");
                if ($("#userForm").find(".error").length > 0) {
                    return false;
                }
            });
        });
    </script>
</head>
<body>
    <form action="http://www.baidu.com" id="userForm">
        <p>
            邮箱: <input type="text" name="" id="user">
        </p>
        <p>
            密码: <input type="text" name="" id="pwd">
        </p>
        <p>
            <input type="submit" value="注册" id="reg">
        </p>
    </form>
</body>
</html>

posted on 2017-02-25 10:08 梦幻飞雪阅读(665) 评论(0) 收藏举报