如果没填身份证号码或者号码写错则您的身份证就为空了
其中光标移出事件可以封装
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>