layui表单验证：从基础规则到自定义验证

原创 于 2025-09-02 13:49:21 发布 · 875 阅读 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

layui表单验证：从基础规则到自定义验证

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。 【免费下载链接】layui 项目地址: https://gitcode.com/GitHub_Trending/la/layui

还在为表单验证的繁琐逻辑而头疼？还在重复编写相同的验证代码？layui的表单验证功能让你用最简洁的方式实现强大的验证逻辑，从基础规则到复杂自定义验证，一文掌握！

读完本文你将获得：

  • ✅ layui内置验证规则的完整用法
  • ✅ 自定义验证规则的实现技巧
  • ✅ 主动触发验证的高级应用
  • ✅ 验证提示样式的个性化配置
  • ✅ 实战案例与最佳实践

📋 内置验证规则大全

layui提供了丰富的内置验证规则，只需在表单项上添加 lay-verify 属性即可使用：

<form class="layui-form">
  <!-- 必填项验证 -->
  <input type="text" lay-verify="required" placeholder="必填项">
  
  <!-- 手机号格式验证 -->
  <input type="tel" lay-verify="phone" placeholder="手机号">
  
  <!-- 邮箱格式验证 -->
  <input type="email" lay-verify="email" placeholder="邮箱">
  
  <!-- URL格式验证 -->
  <input type="url" lay-verify="url" placeholder="网址">
  
  <!-- 数字格式验证 -->
  <input type="number" lay-verify="number" placeholder="数字">
  
  <!-- 日期格式验证 -->
  <input type="date" lay-verify="date" placeholder="日期">
  
  <!-- 身份证格式验证 -->
  <input type="text" lay-verify="identity" placeholder="身份证号">
  
  <!-- 多重规则组合验证 -->
  <input type="text" lay-verify="required|email" placeholder="必填邮箱">
  
  <button class="layui-btn" lay-submit>提交</button>
</form>

验证规则说明表

规则名称验证内容示例值是否必填
required非空验证-是
phone手机号格式13800138000否
email邮箱格式test@example.com否
urlURL格式https://example.com否
number数字格式123.45否
date日期格式2023-12-01否
identity身份证格式110101199001011234否

🎨 验证提示样式配置

layui支持多种验证提示样式，通过 lay-vertype 属性配置：

<!-- 默认提示（吸附层） -->
<input type="text" lay-verify="required" lay-vertype="tips">

<!-- 对话框提示 -->
<input type="text" lay-verify="required" lay-vertype="alert">

<!-- 消息提示 -->
<input type="text" lay-verify="required" lay-vertype="msg">

<!-- 自定义必填提示文本 -->
<input type="text" lay-verify="required" lay-reqtext="请输入用户名">

🔧 自定义验证规则实战

当内置规则无法满足需求时，可以通过 form.verify() 方法定义自定义规则：

基础自定义规则

layui.use('form', function(){
  var form = layui.form;
  
  // 定义自定义验证规则
  form.verify({
    // 用户名验证规则
    username: function(value, item){
      if (!/^[a-zA-Z0-9_]{4,16}$/.test(value)) {
        return '用户名必须是4-16位的字母、数字或下划线';
      }
    },
    
    // 密码强度验证
    password: function(value, item){
      if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}/.test(value)) {
        return '密码必须包含大小写字母和数字，且长度不少于8位';
      }
    },
    
    // 确认密码验证
    confirmPass: function(value, item){
      var pass = $('input[name=password]').val();
      if (value !== pass) {
        return '两次输入的密码不一致';
      }
    }
  });
});

高级自定义规则示例

form.verify({
  // 必填项验证（带自定义逻辑）
  requiredCustom: function(value, item){
    if (!value.trim()) {
      return '此项为必填项';
    }
  },
  
  // 非必填项验证（有值才验证）
  optionalEmail: function(value, item){
    if (!value) return; // 空值不验证
    
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      return '请输入有效的邮箱地址';
    }
  },
  
  // 自定义提示方式
  customAlert: function(value, item){
    if (value === 'admin') {
      layer.alert('不能使用管理员用户名');
      return true; // 返回true阻止默认提示
    }
  },
  
  // 异步验证示例
  asyncCheck: function(value, item, callback){
    // 模拟异步验证
    setTimeout(function(){
      if (value === 'exists') {
        callback('该用户名已存在');
      } else {
        callback();
      }
    }, 500);
  }
});

🚀 主动触发验证

layui 2.7+ 版本支持主动触发验证，非常适合实时验证场景：

<div class="layui-form">
  <input type="tel" name="phone" lay-verify="required|phone" class="layui-input" id="validate-phone">
  <button type="button" class="layui-btn" id="get-code">获取验证信息</button>
</div>

<script>
layui.use(['form', 'layer'], function(){
  var form = layui.form;
  var layer = layui.layer;
  
  // 点击获取验证信息时主动验证
  $('#get-code').on('click', function(){
    var isValid = form.validate('#validate-phone');
    
    if(isValid){
      layer.msg('验证通过，发送信息...');
      // 执行发送逻辑
    }
  });
});
</script>

📊 验证规则组合策略

规则优先级流程图

mermaid

多重规则执行顺序

// 规则执行顺序：从左到右
lay-verify="required|email|customRule"

// 等效于：
if (空值检查失败) return '必填项错误';
if (邮箱格式检查失败) return '邮箱格式错误';  
if (自定义规则检查失败) return '自定义错误';

🎯 实战案例：用户注册表单

<form class="layui-form" lay-filter="register-form">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required|username" 
             placeholder="4-16位字母数字" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" lay-verify="required|password" 
             placeholder="至少8位，含大小写数字" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">确认密码</label>
    <div class="layui-input-block">
      <input type="password" name="confirmPassword" lay-verify="required|confirmPass" 
             class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
      <input type="email" name="email" lay-verify="email" 
             placeholder="选填" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="register-submit">注册</button>
    </div>
  </div>
</form>

<script>
layui.use(['form', 'layer', 'jquery'], function(){
  var form = layui.form;
  var layer = layui.layer;
  var $ = layui.$;
  
  // 自定义验证规则
  form.verify({
    username: function(value){
      if (!/^[a-zA-Z0-9_]{4,16}$/.test(value)) {
        return '用户名必须是4-16位的字母、数字或下划线';
      }
    },
    password: function(value){
      if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}/.test(value)) {
        return '密码必须包含大小写字母和数字，且长度不少于8位';
      }
    },
    confirmPass: function(value){
      var pass = $('input[name=password]').val();
      if (value !== pass) {
        return '两次输入的密码不一致';
      }
    }
  });
  
  // 提交事件
  form.on('submit(register-submit)', function(data){
    var field = data.field;
    
    // 显示成功信息
    layer.msg('注册信息验证通过！');
    
    // 这里可以执行AJAX提交等操作
    console.log('提交数据:', field);
    
    return false; // 阻止表单跳转
  });
});
</script>

💡 最佳实践与技巧

1. 验证性能优化

// 使用定向渲染减少性能开销
form.render($('#specific-form')); // 只渲染特定表单

// 批量验证时使用filter参数
form.validate(null, 'form-filter'); // 只验证特定过滤器的表单

2. 动态表单验证

// 动态添加验证规则
$('#dynamic-input').attr('lay-verify', 'required|email');

// 重新渲染表单
form.render('input'); // 只重新渲染input元素

3. 验证状态管理

// 获取验证状态
var isValid = form.validate(elem);

// 清除验证状态
$('.layui-form-danger').removeClass('layui-form-danger');

4. 国际化验证提示

form.verify({
  required: function(value){
    if (!value.trim()) {
      return getI18nText('validation.required'); // 国际化文本
    }
  }
});

🎓 总结

layui的表单验证系统提供了从简单到复杂的完整解决方案：

特性描述适用场景
内置规则开箱即用的常见验证快速开发、标准表单
自定义规则灵活的业务逻辑验证复杂业务需求、特殊验证
主动验证实时触发的验证机制即时反馈、用户体验优化
组合验证多重规则的协同工作复杂数据校验

通过本文的学习，你应该能够：

  • 🎯 熟练使用layui的所有内置验证规则
  • 🛠️ 根据业务需求创建自定义验证规则
  • ⚡ 实现主动触发和实时验证功能
  • 🎨 定制化验证提示样式和用户体验
  • 🚀 优化验证性能和处理复杂场景

layui的表单验证不仅功能强大，而且API设计简洁优雅，让开发者能够专注于业务逻辑而不是验证细节。立即尝试这些技巧，提升你的表单开发体验吧！

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。 【免费下载链接】layui 项目地址: https://gitcode.com/GitHub_Trending/la/layui

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值