完整的表单验证实例（含用户名密码长度、邮箱手机号格式验证）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
        .error{
            color:#f00;
            font-weight: bold;
            display: none;
        }
    </style>
    <script src='jquery.js'></script>
</head>
<body>
    <form action="reg.php" method="get">
        <p>用户名：</p>
        <p>
            <input type="text" name="username" class="auth"/>
            <span class="error">用户名长度至少六位！</span>
        </p>
        <p>密码：</p>
        <p>
            <input type="text" name="password" class="auth"/>
            <span class="error">密码长度至少八位！</span>
        </p>
        <p>确认密码：</p>
        <p>
            <input type="text" name="repassword" class="auth"/>
            <span class="error">两次密码不一致！</span>
        </p>
        <p>邮箱:</p>
        <p>
            <input type="text" class="auth" name='email'>
            <span class='error'>邮箱格式不正确!</span>
        </p>
        <p>手机号码:</p>
        <p>
            <input type="text" class="auth" name='phone' maxlength='11'>
            <span class='error'>手机号码不正确!</span>
        </p>
        <p><input type="submit" value="注册"></p>
    </form>
</body>
<script>
$('input[name=username]').blur(function(){//给表单设置失去焦点后的验证条件
    val=this.value;
    if(val.length<6){
        $(this).data({'num':0});
        $(this).next().show();
    }else{
        $(this).data({'num':1});
        $(this).next().hide();
    }
});

$('input[name=password]').blur(function(){
    val=this.value;
    if(val.length<8){
        $(this).data({'num':0});
        $(this).next().show();
    }else{
        $(this).data({'num':1});
        $(this).next().hide();
    }
});

$('input[name=repassword]').blur(function(){
    val1=$('input[name=password]').val();
    val2=this.value;
    if(val2!=val1){
        $(this).data({'num':0});
        $(this).next().show();
    }else{
        $(this).data({'num':1});
        $(this).next().hide();
    }
});

$('input[name=email]').blur(function(){
    val=this.value;

    if(!val.match(/^\w+@\w+\.\w+$/i)){
        $(this).data({'num':0});
        $(this).next().show();
    }else{
        $(this).data({'num':1});
        $(this).next().hide();
    }
});

$('input[name=phone]').blur(function(){
    val=this.value;

    if(!val.match(/^1\d{10}$/)){
        $(this).data({'num':0});
        $(this).next().show();
    }else{
        $(this).data({'num':1});
        $(this).next().hide();
    }
});

$('form').submit(function(){//表单提交时可以触发所有元素的blur事件
    $('.auth').blur();
    total=0;
    $('.auth').each(function(){
        total+=$(this).data('num');
    });
    if(total!=5){//把所有表单元素绑定在一起进行综合判断是否存在不符合判定的元素
        return false;
    }
});
</script>
</html>
原文链接：https://blog.csdn.net/weixin_47982238/article/details/108022280