layui 表单标签的校验方法

什么是layui表单标签的校验方法

layui是一套基于jQuery的前端UI框架，它提供了一种方法来简化表单的验证功能。

其中，layui.form提供了大量表单组件，并且封装了常用的表单验证规则和方法。我们只需要调用layui的基础方法，就可以完成丰富的表单验证功能。

layui表单标签的校验方法使用步骤

引入layui框架和css：

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

定义表单HTML代码，并设置组件的ID和lay-verify属性，lay-verify可以指定组件内的数据校验规则。

<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="username" lay-verify="required|username" placeholder="请输入用户名" autocomplete="off" 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="请输入密码" 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="formDemo">立即提交</button>
    </div>
  </div>
</form>

说明：lay-verify的属性值由多个验证规则组成，每个规则之间用“|”符号分割。

调用layui.form的render方法，对表单进行渲染，以激活表单的功能。

layui.use(['form', 'jquery'], function () {
  var form = layui.form,
      $ = layui.jquery;
  form.render();
});

监听表单提交，以处理用户提交的信息，包括验证用户输入的信息是否正确。

form.on('submit(formDemo)', function (data) {
  layer.msg(JSON.stringify(data.field));
  return false;
});

说明：监听表单提交需要为按钮加上lay-filter="formDemo"的属性，表示当前表单的过滤器名称，与form.on('submit(formDemo)'的参数保持一致。

layui表单标签的校验方法常用验证规则

规则名称	说明
`required`	必填项
`phone`	电话
`email`	邮箱
`url`	URL链接
`number`	数字
`date`	日期
`identity`	身份证

以下是一些代码示例，演示了如何使用上述的常用校验规则：

示例一：验证必填项

<div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
        <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
</div>

在上例中，通过在必填项的组件的lay-verify属性中设置“required”，来指定当前组件的数据必须填写。

示例二：验证手机号

<div class="layui-form-item">
    <label class="layui-form-label">手机号</label>
    <div class="layui-input-block">
        <input type="text" name="phone" placeholder="请输入手机号" lay-verify="required|phone" autocomplete="off" class="layui-input">
    </div>
</div>

在上例中，通过在手机号的组件的lay-verify属性中设置“required|phone”来指定当前组件的数据必须填写，并且必须符合手机号的格式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：layui 表单标签的校验方法 - Python技术站