<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单验证1</title>
        <style type="text/css">
            .form_item{
                height:60px;
            }
            .check_info{
                color:#ccc;
                display: /*none;*/;
                margin-left:120px;
                font-size: 12px;
                display: none;
            }
            label{
                float: left;
                text-align: right;
                width: 100px;
                margin-right: 10px;
                height: 30px;
                line-height: 30px;

            }
            input,button{
                background: transparent;
                outline: none;
                border: none;
                border:1px solid #ccc;
                border-radius: 10px;
                height: 30px;
                width: 300px;
                line-height: 30px;
                text-indent: 10px;
            }
            #submit{
                margin-left: 110px;
                cursor: pointer;
            }
        </style>

    </head>
    <body>
        <form action="http://www.baidu.com" method="post" onsubmit="return check_form()">
            <div class="form_item">
                <label>用户名:</label><input type="text" name="user_name" id="user_name" onchange="check_username()" /><br />
                <span class="check_info">中英文、数字、符号的组合，4-20个字符</span>
            </div>
            <div class="form_item">
                <label>密码:</label><input type="password" name="password" id="password" value="" onchange="check_psd()" /><br />
                <span class="check_info">中英文、数字、符号的组合，6-20个字符</span>
            </div>
            <div class="form_item">
                <label>密码:</label><input type="password"  id="psd_confirm" value="" onchange="check_psdagain()"/><br />
                <span class="check_info">请再次输入密码</span>
            </div>
            <div class="form_item">
                <label>手机:</label><input type="text"  id="phone" value="" onchange="check_phone()"/><br />
                <span class="check_info">您可以用手机找回密码</span>
            </div>
            <div class="form_item">
                <label>邮箱:</label><input type="text"  id="email" value="" onchange="check_email()"/><br />
                <span class="check_info">您可以用邮箱找回密码</span>
            </div>
            <button id="submit">提交</button>
        </form>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
            $('input').each(function(i){
                $(this).focus(function(){
                    $(this).parent().find('.check_info').css('display','block');
                })
            });
            //验证用户名
            function check_username(){
                var val=$('#user_name').val();
                var l=val.length;
                var alen=0;
                for(var i=0;i<l;i++){
                    if(val.charCodeAt(i)>255||val.charCodeAt(i)<0){
                        alen +=2;
                    }else{
                        alen++;
                    }
                }
                if(alen<4||alen>20){
                    $('#user_name').parent().find('.check_info').text('用户名长度4-20位').css('color','red');
                    $('#user_name').focus();
                    return false;
                }else{
                    $('#user_name').parent().find('.check_info').text('正确').css('color','#ccc');
                    return true;
                }
            }
            //验证密码
            function check_psd(){
                var v=$('#password').val();
                var numasc = 0;
                var charasc = 0;
                var otherasc = 0;
                if(0==v.length){
                    $('#password').parent().find('.check_info').text('密码不能为空').css('color','red');
                    $('#password').focus();
                    return false;
                }else if(v.length<8||v.length>20){
                    $('#password').parent().find('.check_info').text('密码长度8-20位').css('color','red');
                    $('#password').focus();
                    return false;
                }else{
                    for (var i = 0; i < v.length; i++) {
                        var asciiNumber = v.substr(i, 1).charCodeAt();
                        if (asciiNumber >= 48 && asciiNumber <= 57) {
                            numasc += 1;//数字
                        }
                        if ((asciiNumber >= 65 && asciiNumber <= 90)||(asciiNumber >= 97 && asciiNumber <= 122)) {
                            charasc += 1;//字母
                        }
                        if ((asciiNumber >= 33 && asciiNumber <= 47)||(asciiNumber >= 58 && asciiNumber <= 64)||(asciiNumber >= 91 && asciiNumber <= 96)||(asciiNumber >= 123 && asciiNumber <= 126)) {
                            otherasc += 1;//字符
                        }
                    }
                    if(0==numasc)  {
                        $('#password').parent().find('.check_info').text('密码必须含有数字').css('color','red');
                        $('#password').focus();
                        return false;
                    }else if(0==charasc){
                        $('#password').parent().find('.check_info').text('密码必须含有字母').css('color','red');
                        $('#password').focus();
                        return false;
                    }else if(0==otherasc){
                        $('#password').parent().find('.check_info').text('密码必须含有字符').css('color','red');
                        $('#password').focus();
                        return false;
                    }else{
                        $('#password').parent().find('.check_info').text('正确').css('color','#ccc');
                        return true;
                    }
                }
            };
            //再次验证密码 
            function check_psdagain(){
                var a=$('#password').val();
                var aa=$('#psd_confirm').val();
                if(a===aa&&aa!=''){
                    $('#psd_confirm').parent().find('.check_info').text('正确').css('color','#ccc');
                    return true;
                }else{
                    $('#psd_confirm').parent().find('.check_info').text('两次输入密码不一致').css('color','red');
                    $('#psd_confirm').focus();
                    return false;
                }
            }
            //验证手机号码
            function check_phone(){ 
                var phone=$('#phone').val();
                var reg=/^1[34578]\d{9}$/;
                var regu=new RegExp(reg);
                if(!regu.test(phone)){ 
                    $('#phone').parent().find('.check_info').text('手机格式不正确，请重填').css('color','red');
                    $('#phone').focus();
                    return false;
                }else{
                    $('#phone').parent().find('.check_info').text('正确').css('color','#ccc');
                    return true;
                }
            }
            //验证邮箱
            function check_email(){
                var email=$('#email').val();
                var regu=new RegExp(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/);
                if(!regu.test(email)){
                 $('#email').parent().find('.check_info').text('邮箱格式不正确，请重填').css('color','red');
                    $('#email').focus();
                    return false;
                }else{
                    $('#email').parent().find('.check_info').text('正确').css('color','#ccc');
                    return true;
                }    
            }
            //表单提交
            function check_form(){
                check_username();
                check_psd();
                check_psdagain();
                check_phone();
                check_email();
                var t=check_username()&&check_psd()&&check_psdagain()&&check_phone()&&check_email();
                if(t==false){return false;}
                return true;
            }
    </script>
    </body>
</html>