前端表单正则+失焦验证

HTML页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <form action="https://www.baidu.com/" method="get"onsubmit="return fun()">
        <div class="box">
            <div class="form-group" style="width: 500px;">
                <label for="name">用户名</label>
                <input type="text" class="form-control" id="name"onblur="fun1()"  placeholder="请输入用户名">
                <p class="help-baock" style="color: red;" id="a"></p>
            </div>
            <div class="form-group" style="width: 500px;">
                <label for="name">登录密码</label>
                <input type="text" class="form-control" id="pas" placeholder="请输入登录密码"onblur="fun2()">
                <p class="help-baock" style="color: red;" id="b"></p>
            </div>
            <div class="form-group" style="width: 500px;">
                <label for="name">确认密码</label>
                <input type="text" class="form-control" id="pasw"onblur="fun3()" placeholder="请输入确认密码">
                <p class="help-baock" style="color: red;" id="c">请务必输入确认密码</p>
            </div>
            <div class="form-group" style="width: 500px;">
                <label for="name">姓名</label>
                <input type="text" class="form-control" id="namee"onblur="fun4()" placeholder="请输入姓名">
                <p class="help-baock" style="color: red;" id="d">请务必输入姓名</p>
            </div>
            <div class="form-group" style="width: 500px;">
                <label for="name">身份证</label>
                <input type="text" class="form-control" id="shen" onblur="fun5()"   placeholder="请输入身份证">
                <p class="help-baock" style="color: red;" id="e">请务必输入身份证</p>
            </div>
            <div class="form-group" style="width: 500px;">
                <label for="name">邮箱</label>
                <input type="text" class="form-control" id="em" onblur="fun6()" placeholder="请输入邮箱">
                <p class="help-baock" style="color: red;" id="f">请务必输入邮箱</p>
            </div>
            <div class="form-group" style="width: 500px;" >
                <label for="name">手机号码</label>
                <input type="text" class="form-control" id="phone" onblur="fun7()" placeholder="请输入手机号码">
                <p class="help-baock" style="color: red;" id="g">请务必输入手机号码</p>
            </div>
            <input type="checkbox" name="" id="cc"  value="1"/>我已阅读同意遵守规定<span id="q" style="color: red;">请先勾选同意事项</span>
            <p><button type="submit" onclick="fun()">确认提交</button></p>
        </div>
            </form>
    </body>
</html>
<script type="text/javascript">
    
     function fun(){
        if(fun1()&&fun2()&&fun3()&&fun4()&&fun5()&&fun6()&&fun7()&&fun8()){
            return true
        }else{
            return false
        }
        
    }
    
    
    function fun8(){
        var value=$(':checkbox:checked').val();
        if(value==1){
            $('#q').html('')
            return true
        }else{
                $('#q').html('<span id="q" style="color: red;">请先勾选同意事项</span>')
                return false
        }
        
        
    }
    
    
    
    function fun7(){
        var aqq=$('#phone').val();
            var aww=/^(13|15|17|19|18)\d{9}$/
            var aee=aww.test(aqq)
            if(aee==''){
                $('#g').html('手机格式不正确_')
                return false
            }else{
                $('#g').html('ok')
                return true
            }
        
        
    }
    //
    //
    function fun6(){
        
        var aqq=$('#em').val();
            var aww=/^\w+@(qq|QQ)\.(com|cn)$/
            var aee=aww.test(aqq)
            if(aee==''){
                $('#f').html('(邮箱格式不正确_')
                return false
            }else{
                $('#f').html('ok')
                return true
            }
    }
    //
    function fun5(){
        var aqq=$('#shen').val();
            var aww=/(^\d{18}$)|([0-9]{17}[xX])$/
            var aee=aww.test(aqq)
            if(aee==''){
                $('#e').html('18位纯数字或17位纯数字+X')
                return false
            }else{
                $('#e').html('ok')
                return true
            }
        
    }
       
        
    //
     function  fun4(){
        var aqq=$('#namee').val();
            var aww=/^[\u4e00-\u9fa5]{2,3}$/
            var aee=aww.test(aqq)
            if(aee==''){
                $('#d').html('2-3位汉字')
                return false
            }else{
                $('#d').html('ok')
                return true
            }
    }
    //
    function  fun3(){
        var aqq=$('#pas').val();
        var aww=$('#pasw').val();
        if(aww==aqq){
            $('#c').html('两次密码相同')
            return true
        }else{
            $('#c').html('两次密码不一致')
            return false
        }
        
    }
    //
    
    
     function fun2(){
        var aqq=$('#pas').val();
            var aww=/^\w{6,20}$/
            var aee=aww.test(aqq)
            if(aee==''){
                $('#b').html('6-20位字母，数字或符号')
                return false
            }else{
                $('#b').html('ok')
                return true
            }
        
    }

    //
      function fun1(){
        var aqq=$('#name').val();
            var aww=/^[0-9a-zA-Z_]{6,30}$/
            var aee=aww.test(aqq)
            if(aee==''){
                $('#a').html('6-30位字母、数字或_')
                return false
            }else{
                $('#a').html('ok')
                return true
            }
            
    }

//



</script>