layui在form表单页面通过Validform加入简单验证的方法

2023年6月10日下午7:37 • JavaScript

当我们使用layui框架进行Web开发时，添加表单验证是必不可少的一项功能。layui可以与Validform插件集成使用，从而使我们的表单验证更加方便快捷。以下是实现这一功能的步骤：

第一步：引入必要的CSS和JS文件

首先需要在页面中引入layui和Validform的CSS和JS文件，可以使用CDN或下载到本地进行引入。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表单验证示例</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/Validform/5.3.2/css/style.css">
</head>
<body>
<!-- 省略内容 -->
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script src="https://cdn.staticfile.org/Validform/5.3.2/Validform.min.js"></script>
</body>
</html>

第二步：编写表单代码

接下来需要编写表单代码，使用layui的form模块，这里示例代码给出了一个简单的表单：

<form id="formDemo" 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" 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" 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="demo1">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

第三步：初始化Validform插件

在页面加载完毕后需要对Validform插件进行初始化，配置各项参数，并触发表单的提交事件。示例代码如下：

$(function(){
  //表单验证
  $('#formDemo').Validform({
    tiptype: function(msg, o, cssctl){
      //可以在这里自定义提示信息的样式
      var objtip=$(".error-box");
      cssctl(objtip,o.type);
      objtip.text(msg);
    },
    callback:function(data){
      //在这里可以对表单的提交进行处理，示例代码只做了一个弹窗
      layer.alert(JSON.stringify(data.field), {
          title: '表单数据'
      });
      return false;//防止表单跳转
    }
  });
});

第四步：运行测试

在完成以上三个步骤后，我们就可以在浏览器中运行测试了。当在表单中输入数据并点击提交按钮时，插件会自动验证表单中的数据，并在验证不通过时进行提示。示例代码如下：

https://codepen.io/mzlogin/pen/RwKBexr

示例二

如果我们需要进行更加详细的验证，例如对于输入的邮件地址需要符合邮箱格式，可以使用Validform的自定义规则进行扩展。在示例代码中，我们增加了对于邮箱地址的格式验证。示例代码如下：

<form id="formDemo" 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" 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" 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="text" name="email" lay-verify="email" 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="demo1">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

$(function(){
  //添加自定义插件规则
  $.Datatype.email = /^[a-z0-9\-_]+(\.[a-z0-9\-_]+)*@[a-z0-9\-_]+(\.[a-z0-9\-_]+)+$/;

  //表单验证
  $('#formDemo').Validform({
    tiptype: function(msg, o, cssctl){
      var objtip=$(".error-box");
      cssctl(objtip,o.type);
      objtip.text(msg);
    },
    callback:function(data){
      layer.alert(JSON.stringify(data.field), {
          title: '表单数据'
      });
      return false;
    }
  });
});

示例代码：https://codepen.io/mzlogin/pen/gOwjdKv

在验证不通过时，Validform会自动进行错误提示，同时也会在表单项后面显示错误信息。在验证通过时，可以通过回调函数对数据进行处理。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：layui在form表单页面通过Validform加入简单验证的方法 - Python技术站