<link rel="stylesheet" href="path/to/layui.css" /> <script src="path/to/layui.js"></script>
<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="idcard" required lay-verify="required|uniqueIdCard" placeholder="请输入身份证号码" autocomplete="off" class="layui-input"> </div> </div> <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button> </form>
在Layui的表单初始化部分添加自定义验证规则:
layui.use(['form'], function(){ var form = layui.form; // 添加自定义验证规则 form.verify({ uniqueIdCard: function(value){ if(!value) return '身份证号码不能为空'; if(!/^[1-9]\d{5}(18|19|20)?\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/.test(value)){ return '请输入有效的身份证号码'; } // 异步检查身份证唯一性(这里需要后端配合) return new Promise(function(resolve, reject) { $.ajax({ url: '/api/check-idcard', // 后端API接口地址 type: 'POST', data: {idcard: value}, success: function(res) { if(res.status === 'success' && res.unique) { resolve(); // 验证通过 } else { reject('该身份证号码已被注册'); // 验证失败,提示信息 } }, error: function() { reject('服务器错误'); // 网络错误处理 } }); }); } }); });