layui自定义表单验证 检查身份证唯一

前端   2025-05-08 20:01   1   0  

前端验证

<link rel="stylesheet" href="path/to/layui.css" />
<script src="path/to/layui.js"></script>

初始化Layui表单模块

<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('服务器错误'); // 网络错误处理
          }
        });
      });
    }
  });
});

后端验证(确保唯一性)



上一篇
下一篇
没有了