layui.js实现的表单验证功能示例

下面是 "layui.js实现的表单验证功能示例" 的完整攻略。

一、什么是layui.js

layui.js 是一款简易的前端 UI 解决方案，是由著名的前端开源组织“贤心之家”维护开发的。layui.js 主要包括丰富的UI组件和一套简单的前端模板。

在 layui.js 中，表单验证是其中之一的功能，该功能具有高度的可定制性和易用性。

二、表单验证的基本功能

1. 表单验证的调用
   表单验证的调用非常方便，直接采用下面的代码即可：

layui.use('form', function () {
    var form = layui.form;
    //监听提交
    form.on('submit(formDemo)', function(data){
    //code ...
    });
});

这里的 'formDemo' 为 form 元素lay-filter的值。需要注意的是，form表单中的所有元素都需要添加 lay-verify 的属性。

1. 必填项验证

必填项验证需要在HTML响应元素中加入 lay-verify="required"，如下所示：

<input type="text" name="username" required lay-verify="required" placeholder="请输入账户名" autocomplete="off" class="layui-input">

1. 长度验证

长度验证可以使用 lay-verify="length"来进行验证，如下所示：

<input type="text" name="username" required lay-verify="length" minlength="4" maxlength="16" placeholder="请输入账户名" autocomplete="off" class="layui-input">

其中，minlength 和 maxlength 分别表示最小长度和最大长度。

1. 邮箱验证

邮箱验证可以使用 lay-verify="email" 来完成，如下所示：

<input type="text" name="email" required lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">

这样就可以对邮箱的格式进行验证。

三、Layui.js的例子

下面介绍两个关于layui.js表单验证的示例：

1. 表单提交验证

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" 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="login">登录</button>
    </div>
  </div>
</form>

<script>
layui.use(['form', 'layer'], function () {
    var form = layui.form,
        layer = layui.layer;

    //监听提交
    form.on('submit(login)', function (data) {
        layer.msg(JSON.stringify(data.field));
        return false;
    });
});
</script>

这个例子中，输入框加上 lay-verify="required"即可实现必填项验证。按钮设置 lay-filter 属性后，可以使用 form.on('submit(filter)', function(data){}) 监听到表单提交事件，然后进行下一步的操作。

1. 自定义规则验证

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-inline">
      <input type="text" name="input_test" autocomplete="off" class="layui-input" lay-verify="input_test">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
    </div>
  </div>
</form>

<script>
layui.use('form', function(){
  var form = layui.form;

  //自定义验证规则
  form.verify({
    input_test: function(value){
      if(value.length < 5){
        return '输入框至少得5个字符啊';
      }
    }
  });

  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

这个例子中，form 中每一个需要验证的元素都设置了 名称 和 lay-verify属性（这里是 input_test）。然后使用 form.verify() 方法定义验证规则，其中input_test是表单项中的一个名称，value 是表单项的值。如果定义的表单验证函数返回了错误信息，则验证不通过。

四、总结

通过上面的两个示例，可以看出 layui.js 表单验证功能具有方便易用、灵活可定制的特点。在具体使用时可以根据需要调用相应的场景和规则即可，具有高效和实用性，适合做各种表单类型的验证。