layui插件表单验证提交触发提交的例子

下面是关于“layui插件表单验证提交触发提交的例子”的完整攻略：

1. 简介

Layui是一款轻量级、易扩展、特别适合动态界面的前端UI框架，提供全面的组件和功能，并且提供免费的开源许可，可以节省很多开发时间与成本。在Layui中，表单验证是组件中非常重要的功能，可以保证表单提交数据的正确性。

2. 表单验证

2.1. 表单验证插件

Layui表单验证插件是Layui中非常重要的组件，使用插件可以实现表单的各种验证规则，如验证输入的内容是否合法、是否符合要求等。

在Layui中使用表单验证插件需要在页面中先引入Layui的js和css资源，然后通过调用Layui表单验证插件的方法来将相应的表单元素初始化。

2.2. 表单验证的基本用法

（1）在HTML页面中定义需要进行表单验证的表单元素。

<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|number" 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" 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>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

其中，lay-verify属性用于指定需要进行的验证规则，多个规则之间用|分隔。

（2）在JavaScript代码中调用Layui表单验证插件的form.render()方法来渲染表单元素。

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

（3）在JavaScript代码中调用form.on('submit(filter)', function(data){})方法来制定表单验证通过后的操作。

layui.use(['form'], function () {
  var form = layui.form;

  form.render();

  form.on('submit(formDemo)', function (data) {
    //表单提交的操作
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
});

其中，form.on()方法的参数中，“submit(formDemo)”指定了需要执行的表单的lay-filter属性的值，“function(data)”中的data将获取到表单元素的具体值，可以根据data进行表单的具体操作。

2.3 表单验证的实现方法

在Layui中，验证表单可通过在需要验证的input添加lay-verify属性，并设置相应的验证规则来完成。lay-verify属性包括以下几个值：

required：此项必填（非空）。
phone：手机号码。
email：电子邮箱。
url：URL地址。
number：数字类型。
date：日期类型。
identity：身份证号。

在验证的同时。可以通过表单验证插件的filter和lay-submit属性来触发表单提交。完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Layui表单验证</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
</head>
<body>

<div class="layui-anim layui-anim-up">
    <form class="layui-form" lay-filter="formDemo">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required" name="username" placeholder="请输入用户名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="phone" name="mobile" placeholder="请输入手机号" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">电子邮件</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="email" name="mail" placeholder="请输入电子邮件" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">日期</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="date" name="date" placeholder="请输入日期" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="identity" name="identity" placeholder="请输入身份证号" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">提交</button>
            </div>
        </div>
    </form>
</div>

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

        form.render();

        form.on('submit(formDemo)', function (data) {
            //表单提交的操作
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });
    });
</script>
</body>
</html>

3. 小结

以上就是关于“layui插件表单验证提交触发提交的例子”的完整攻略，通过使用Layui表单验证插件，可以方便地对表单进行验证，并且满足不同的验证需求。同时，通过form.on('submit(filter)', function(data){})方法来实现表单的提交，使用户能够在表单验证通过后快速提交数据。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：layui插件表单验证提交触发提交的例子 - Python技术站