表单验证（JQ）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        form{
            width: 750px;
            margin: 200px auto;
        }
        td{
            padding: 10px 3px;
        }
        input[name^="sub"]{
            height: 20px;
            width:40px;
            margin: 0px 130px;
        }
        div{
            color: red;
            font-size:15px;
        }
        .code{
            margin-left: 15px;
            padding: 2px;
            border:1px solid black;
            cursor: pointer;
        }
    </style>
</head>
<body>
<form action="#" onsubmit="return verify()">
    <table>
        <tr>
            <td>用&nbsp;&nbsp;户&nbsp;&nbsp;名：</td>
            <td><input type="text" name="user" placeholder="6-12位英文或数字组成"></td>
            <td><div></div></td>
        </tr>
        <tr>
            <td>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
            <td><input type="password" name="pswd" placeholder="随意"></td>
            <td><div></div></td>
        </tr>
        <tr>
            <td>重&nbsp;复&nbsp;密&nbsp;码：</td>
            <td><input type="password" name="pswd2" placeholder="随意，但是要和上面一样"></td>
            <td><div></div></td>
        </tr>
        <tr>
            <td>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</td>
            <td><input type="text" name="email" placeholder="[email protected]"></td>
            <td><div></div></td>
        </tr>
        <tr>
            <td>手&nbsp;&nbsp;机&nbsp;&nbsp;号：</td>
            <td><input type="text" name="phone" placeholder="11位手机号"></td>
            <td><div></div></td>
        </tr>
        <tr>
            <td>验&nbsp;&nbsp;证&nbsp;&nbsp;码：</td>
            <td><input type="text" name="code" placeholder="请输入验证码"></td>
            <td><div></div></td><br>
            <td><span class="code" onclick="code()"></span></td>
        </tr>
    </table>
    <input type="submit" name="sub" value="注册">
</form>

<script type="text/javascript">
    var flag = true;
    var code_4 = '';
    code();
    $('form input').on({
            'focus':function(){
                $(this).parent().next().children().text('');//选中相应的input后对应的div/span内容消失（）
            },
            'blur':function(){
                flag = true;            //每次失去焦点开始判定前重置flag的布尔值，否则当第一次flag被赋值为false后再次失去焦点后各input的if判断皆为turn也无法改变flag的值
                if ($(this).attr('name') == 'user' && !/^[0-9a-zA-Z]{6,12}$/gi.test(this.value)) {
                    $(this).parent().next().children().text('用户名不合法');
                    flag = false;
                }else if($(this).attr('name') == 'pswd2' && $(this).val()!=$("input[name='pswd']").val()){
                    $(this).parent().next().children().text('两次输入密码不一致');
                    flag = false;
                }else if($(this).attr('name') == 'email' && !/^[0-9a-zA-Z]{1,}@[0-9a-zA-Z]{1,}\.[0-9a-zA-Z]{1,6}$/gi.test(this.value)){
                    $(this).parent().next().children().text('邮箱不合法');
                    flag = false;
                }else if($(this).attr('name') == 'phone' && !/^[0-9a-zA-Z]{11}$/gi.test(this.value)){
                    $(this).parent().next().children().text('手机号不合法');
                    flag = false;
                }else if($(this).attr('name') == 'code' && this.value.toLocaleUpperCase()!=code_4.toLocaleUpperCase()){//根据用户输入的值和验证码值的大小写统一来确定是否相同
                    $(this).parent().next().children().text('请输入正确的验证码');
                    flag = false;
                }else if($("input[name='pswd2']").val()==$("input[name='pswd']").val()){//用来解决当第二密码输入不同，改变第一密码使和第二密码相同后失去焦点第二密码后div内容不改变的问题
                    $("input[name='pswd2']").parent().next().children().text('');
                }
            }
        })
    function verify(){    //返回给form表单true或false
        $("form input").each(function(){
            if ($(this).val() == '') {    //检测input内容是否有空，有空的input旁的span内容添加：不能为空
                $(this).parent().next().children().text('不能为空');
                flag = false;
            }
        })
        return flag;
    }
    function code(){    //验证码
        var carr = ["0","1","2","3","4","5","6","7","8","9","q","w","e","r","t","y","u","i","o","p","a","s","d","f","g","h","j","k","l","z","x","c","v","b","n","m","Q","W","E","R","T","Y","U","I","O","P","A","S","D","F","G","H","J","K","L","Z","X","C","V","B","N","M"];
        for(var i=0;i<4;i++){
            code_4 += carr[Math.floor(Math.random()*carr.length)];
        }
        $('.code').text(code_4);
    }
</script>
</body>
</html>
猜你喜欢
