form表单提交 正则简单判断身份证号，手机号，姓名

如果没填身份证号码或者号码写错则您的身份证就为空了

其中光标移出事件可以封装
CSS样式自己填充我在这里就不加上了
html部分：

    <main>
        <div class="container">
            <div class="fl btn-register">
                <img src="images/icon/register-icon01.png" alt="">
                用户注册
            </div>
            <form action="register-success.html" class="form1">
                <label>
                    <span><b>*</b> 游戏账号：</span>
                    <input type="text" name="" class="txt_LoginCode input1" id="txt_LoginCode">
                    <i class="LoginCode"><img src="images/icon1-1.png"><b></b></i>
                </label>
                <label>
                    <span><b>*</b> 游戏密码：</span>
                    <input type="password" name="" class="txt_Password input1" id="txt_Password">
                    <i class="Password"><img src="images/icon1-1.png"><b></b></i>
                </label>
                <label>
                    <span><b>*</b> 密码确认：</span>
                    <input type="password" name="" class="txt_Confirm input1" id="txt_Confirm">
                    <i class="Confirm"><img src="images/icon1-1.png"><b></b></i>
                </label>
                <label>
                    <span><b>*</b> 真实姓名：</span>
                    <input type="text" name="" id="txt_RealName" class="input1">
                    <i class="RealName"><img src="images/icon1-1.png"><b></b></i>
                </label>
                <label>
                    <span><b>*</b> 身份证号码：</span>
                    <input type="text" name="" id="txt_CardNo" class="input1">
                    <i class="CardNo"><img src="images/icon1-1.png"><b></b></i>
                </label>
                <label>
                    <span>您的身份证号码为：</span>
                    <input type="text" name="" id="txt_CardNoID" class="input1" disabled="true">
                </label>
                <label>
                    <span><b>*</b> 手机号码：</span>
                    <input type="text" name="" id="txt_SecutiryPhone" class="input1">
                    <i class="Phone"><img src="images/icon1-1.png"><b></b></i>
                </label>
                <label style="margin-left:140px;">
                    <input type="checkbox" class="check" style="width:12px;height:12px;">
                    已阅读并同意
                    <a href="javascript:;">《用户协议》</a>
                </label>
                <label style="margin-left:140px;">
                    <input type="submit" value="确认提交" class="btns"" v>
                    <!-- <button class="btns">确认提交</button> -->
                </label>
            </form>
        </div>
    </main>

javascript:

<script>
        // 游戏账号         小写字母开头 小写字母和数字组合（4-16）
        var LoginCode = $("#txt_LoginCode");
        var Login_reg = /^[a-z][a-z0-9]{3,15}$/;
        // 密码           字母和数字组合（4-16）
        var Password = $("#txt_Password");
        var Password_reg = /^[a-zA-Z0-9_]{4,16}$/;
        // 确认密码 
        var Confirm = $("#txt_Confirm");
        // 真实姓名         不包含数字及特殊字符，支持空格 不支持（汉字和字母组合）
        var RealName = $("#txt_RealName");
        var RealName_reg =/^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\s]{1,20})$/;
        // 身份证      18位和15位
        var CardNo = $("#txt_CardNo");
        var CardNo_reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/
        // 手机号码         11位号码
        var Phone = $("#txt_SecutiryPhone");
        var Phone_reg = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
        // 光标移开后执行
        LoginCode.blur(function(){
            if(Login_reg.test(LoginCode.val())){
                $(".LoginCode").show();                                // 显示
                $(".LoginCode img").attr("src","images/icon1-1.png");  // 图片切换
                $(".LoginCode b").addClass("grey");                // 字的颜色(.grey{color:#999})
                $(".LoginCode b").text("");                                // 提示内容
            }else{
                $(".LoginCode").show();
                $(".LoginCode img").attr("src","images/icon2-1.png");
                $(".LoginCode b").removeClass("grey");
                $(".LoginCode b").text("登录名由4-16位小写字母或数字，必须以字母开头");
                // LoginCode.focus();   // 输入错误时光标返回错误input(使用数据传递后台，后台判断)
            }
        })
        Password.blur(function(){
            if(Confirm.val() != ""){                    // 判断确认密码是否为空如果不为空则执行
                Confirm.blur();
            }
            if(Password_reg.test(Password.val())){
                $(".Password").show();
                $(".Password img").attr("src","images/icon1-1.png");
                $(".Password b").addClass("grey");
                $(".Password b").text("");
            }else{
                $(".Password").show();
                $(".Password img").attr("src","images/icon2-1.png");
                $(".Password b").removeClass("grey");
                $(".Password b").text("密码由4-16位小写字母或数字组成");
                // Password.focus();
            }

        })
        Confirm.blur(function(){
            if(Confirm.val() === Password.val()){
                $(".Confirm").show();
                $(".Confirm img").attr("src","images/icon1-1.png");
                $(".Confirm b").addClass("grey");
                $(".Confirm b").text("");
            }else{
                $(".Confirm").show();
                $(".Confirm img").attr("src","images/icon2-1.png");
                $(".Confirm b").removeClass("grey");
                $(".Confirm b").text("两次密码输入不一致");
            }
        })
        RealName.blur(function(){
            if(RealName_reg.test(RealName.val())){
                $(".RealName").show();
                $(".RealName img").attr("src","images/icon1-1.png");
                $(".RealName b").addClass("grey");
                $(".RealName b").text("");
            }else{
                $(".RealName").show();
                $(".RealName img").attr("src","images/icon2-1.png");
                $(".RealName b").removeClass("grey");
                $(".RealName b").text("请输入正确姓名");
                // RealName.focus();
            }
        })
        CardNo.blur(function(){
            if(CardNo_reg.test(CardNo.val())){
                $(".CardNo").show();
                $(".CardNo img").attr("src","images/icon1-1.png");
                $(".CardNo b").addClass("grey");
                $(".CardNo b").text("");
                var Card_start = CardNo.val().substr(0,4);                  // 截取身份证上的前4位数
                var Card_red = CardNo.val().substr(CardNo.val().length-4);  // 截取身份证上的后4位数
                $("#txt_CardNoID").val(Card_start+"****"+Card_red);        // 拼接起来中间加星号
            }else{
                $(".CardNo").show();
                $(".CardNo img").attr("src","images/icon2-1.png");
                $(".CardNo b").removeClass("grey");
                $(".CardNo b").text("请输入正确的身份证");
                // CardNo.focus();
                $("#txt_CardNoID").val("");     // 如果再次点击的时候身份证错误则清空
            }
        })
        Phone.blur(function(){
            if(Phone_reg.test(Phone.val())){
                $(".Phone").show();
                $(".Phone img").attr("src","images/icon1-1.png");
                $(".Phone b").addClass("grey");
                $(".Phone b").text("");
            }else{
                $(".Phone").show();
                $(".Phone img").attr("src","images/icon2-1.png");
                $(".Phone b").removeClass("grey");
                $(".Phone b").text("请输入正确的手机号");
                // Phone.focus();
            }
        })
    </script>