在Layui中，可以使用表单验证组件来实现身份证验证的功能。主要步骤如下：
1. 在HTML页面中引入Layui的表单验证组件：
<!-- 引入layui表单验证组件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.9/css/layui.css" integrity="sha384-S44ferbSyvoD6oCygV2mkydGskU6rI9iDXpL6Ahpu1wNpBtg7T1R8YByV7UEBgbE" crossorigin="anonymous">
<script src="https://cdn.staticfile.org/layui/2.6.9/layui.all.js" integrity="sha384-rttZModXt8izogWZFYvOwNH0G4CD4ILclbY4HBAheTI0kDU/fSgX9FMy5W5DF0Hf" crossorigin="anonymous"></script>
2. 在HTML页面中添加一个表单，并给需要验证的输入框添加相应的属性和值：
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">身份证号</label>
<div class="layui-input-block">
<input type="text" name="id_card" required lay-verify="id_card" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="demo1">提交</button>
</div>
</div>
</form>
其中，`<input>` 标签中的 `lay-verify="id_card"` 表示需要对这个输入框进行身份证验证。
3. 在Layui中注册相应的验证方法：
在页面的 `<script>` 标签中，通过 `layui.form.verify({})` 方法注册相应的验证函数：
layui.use(['form'], function () {
var form = layui.form;
// 自定义验证规则
form.verify({
// 验证身份证
id_card: function(value, item){
var msg = checkIdCard(value); // 调用自定义的验证函数，返回验证信息
if (msg != 'success') {
return msg; // 如果验证不通过，返回提示信息
}
}
});
});
// 自定义身份证验证函数
function checkIdCard(idcard) {
// 验证身份证格式
var regIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if (regIdCard.test(idcard) === false) {
return '身份证格式错误！';
}
// 验证身份证号是否合法
var cityCode = {
'11': '北京',
'12': '天津',
'13': '河北',
'14': '山西',
'15': '内蒙古',
'21': '辽宁',
'22': '吉林',
'23': '黑龙江 ',
'31': '上海',
'32': '江苏',
'33': '浙江',
'34': '安徽',
'35': '福建',
'36': '江西',
'37': '山东',
'41': '河南',
'42': '湖北 ',
'43': '湖南',
'44': '广东',
'45': '广西',
'46': '海南',
'50': '重庆',
'51': '四川',
'52': '贵州',
'53': '云南',
'54': '西藏',
'61': '陕西',
'62': '甘肃',
'63': '青海',
'64': '宁夏',
'65': '新疆',
'71': '台湾',
'81': '香港',
'82': '澳门',
'91': '国外'
};
var tip = '';
var pass = true;
var provinceCode = idcard.substr(0, 2);
if (!cityCode[provinceCode]) {
tip = '身份证号格式错误！';
pass = false;
} else {
if (idcard.length == 18) {
var lastCode = idcard.charAt(17);
var firstCode = idcard.charAt(0);
var codeArray = idcard.split("");
var s = (parseInt(codeArray[0]) + parseInt(codeArray[10])) * 7 + (parseInt(codeArray[1]) + parseInt(codeArray[11])) * 9 + (parseInt(codeArray[2]) + parseInt(codeArray[12])) * 10 +
(parseInt(codeArray[3]) + parseInt(codeArray[13])) * 5 + (parseInt(codeArray[4]) + parseInt(codeArray[14])) * 8 +
(parseInt(codeArray[5]) + parseInt(codeArray[15])) * 4 + (parseInt(codeArray[6]) + parseInt(codeArray[16])) * 2 +
parseInt(codeArray[7]) * 1 + parseInt(codeArray[8]) * 6 + parseInt(codeArray[9]) * 3;
var y = s % 11;
var jym = '10X98765432';
var m = jym.substr(y, 1);
if (lastCode.toUpperCase() != m.toUpperCase()) {
tip = '身份证号格式错误！';
pass = false;
}
if (firstCode == '0') {
tip = '身份证号格式错误！';
pass = false;
}
}
}
if (pass) {
return "success";
} else {
return tip;
}
}
在 `checkIdCard()` 方法中，通过正则表达式验证身份证格式，然后再根据身份证号码计算出身份证校验码，并与输入的校验码进行比较，验证身份证合法性。
如果验证不通过，返回相应的错误提示信息。
4. 提交表单时进行验证
在表单的提交事件中，通过调用 `form.verify()` 方法来触发验证：
//监听提交
form.on('submit(demo1)', function(data){
// 验证通过，提交表单
return true;
});
当 `form.verify()` 方法返回的值为false时，阻止表单的提交。
完整的代码如下：
// HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>身份证验证示例</title>
<!-- 引入layui表单验证组件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.9/css/layui.css" integrity="sha384-S44ferbSyvoD6oCygV2mkydGskU6rI9iDXpL6Ahpu1wNpBtg7T1R8YByV7UEBgbE" crossorigin="anonymous">
<script src="https://cdn.staticfile.org/layui/2.6.9/layui.all.js" integrity="sha384-rttZModXt8izogWZFYvOwNH0G4CD4ILclbY4HBAheTI0kDU/fSgX9FMy5W5DF0Hf" crossorigin="anonymous"></script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">身份证号</label>
<div class="layui-input-block">
<input type="text" name="id_card" required lay-verify="id_card" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="demo1">提交</button>
</div>
</div>
</form>
<script>
layui.use(['form'], function () {
var form = layui.form;
// 自定义验证规则
form.verify({
// 验证身份证
id_card: function(value, item){
var msg = checkIdCard(value); // 调用自定义的验证函数，返回验证信息
if (msg != 'success') {
return msg; // 如果验证不通过，返回提示信息
}
}
});
//监听提交
form.on('submit(demo1)', function(data){
// 验证通过，提交表单
return true;
});
});
// 自定义身份证验证函数
function checkIdCard(idcard) {
// 验证身份证格式
var regIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if (regIdCard.test(idcard) === false) {
return '身份证格式错误！';
}
// 验证身份证号是否合法
var cityCode = {
'11': '北京',
'12': '天津',
'13': '河北',
'14': '山西',
'15': '内蒙古',
'21': '辽宁',
'22': '吉林',
'23': '黑龙江 ',
'31': '上海',
'32': '江苏',
'33': '浙江',
'34': '安徽',
'35': '福建',
'36': '江西',
'37': '山东',
'41': '河南',
'42': '湖北 ',
'43': '湖南',
'44': '广东',
'45': '广西',
'46': '海南',
'50': '重庆',
'51': '四川',
'52': '贵州',
'53': '云南',
'54': '西藏',
'61': '陕西',
'62': '甘肃',
'63': '青海',
'64': '宁夏',
'65': '新疆',
'71': '台湾',
'81': '香港',
'82': '澳门',
'91': '国外'
};
var tip = '';
var pass = true;
var provinceCode = idcard.substr(0, 2);
if (!cityCode[provinceCode]) {
tip = '身份证号格式错误！';
pass = false;
} else {
if (idcard.length == 18) {
var lastCode = idcard.charAt(17);
var firstCode = idcard.charAt(0);
var codeArray = idcard.split("");
var s = (parseInt(codeArray[0]) + parseInt(codeArray[10])) * 7 + (parseInt(codeArray[1]) + parseInt(codeArray[11])) * 9 + (parseInt(codeArray[2]) + parseInt(codeArray[12])) * 10 +
(parseInt(codeArray[3]) + parseInt(codeArray[13])) * 5 + (parseInt(codeArray[4]) + parseInt(codeArray[14])) * 8 +
(parseInt(codeArray[5]) + parseInt(codeArray[15])) * 4 + (parseInt(codeArray[6]) + parseInt(codeArray[16])) * 2 +
parseInt(codeArray[7]) * 1 + parseInt(codeArray[8]) * 6 + parseInt(codeArray[9]) * 3;
var y = s % 11;
var jym = '10X98765432';
var m = jym.substr(y, 1);
if (lastCode.toUpperCase() != m.toUpperCase()) {
tip = '身份证号格式错误！';
pass = false;
}
if (firstCode == '0') {
tip = '身份证号格式错误！';
pass = false;
}
}
}
if (pass) {
return "success";
} else {
return tip;
}
}
</script>
</body>
</html>
相关文章
