layui原生表单验证的实例

在网上看到很多validform和layer配合的验证方式，但是觉得写的不好，不清不楚的，于是研究了一下layui原生的验证

1. 在需要验证的item上加 lay-verify=“value” ，在提交按钮上加 lay-submit lay-filter=“go” 两个属性

value：

required（必填项）
phone（手机号）
email（邮箱）
url（网址）
number（数字）
date（日期）
identity（身份证）
自定义值（就是自定义验证规则）

PS ：layui要使用form 得用use...这样的东西，我就不做说明了

layui.use('form', function(){
  var form = layui.form(); //只有执行了这一步，部分表单元素才会修饰成功

2. 说一下自定义验证

在这里写自定义的验证规则，“username”和“pass”是自定义验证规则的名字，就跟前边的"required","phone"...一样，在这里定义好验证的名字和验证规则，

使用的方法就跟"required","phone"...一样一样的

form.verify({
    username: function(value, item){ //value：表单的值、item：表单的DOM对象
      if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
        return '用户名不能有特殊字符';
      }
      if(/(^\_)|(\__)|(\_+$)/.test(value)){
        return '用户名首尾不能出现下划线\'_\'';
      }
      if(/^\d+\d+\d$/.test(value)){
        return '用户名不能全为数字';
      }
    }

    //我们既支持上述函数式的方式，也支持下述数组的形式
    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
    ,pass: [
      /^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格'
    ]
  });

3. 验证通过了就触发提交

‘submit(go)'这个其实就是绑定“提交按钮”,还记得第一步让你加的两个属性吧 lay-submit lay-filter=“go” ，懂了吧！go是可以随便写的

这里指的一提的是data.field这个东西，它会获得 全部表单字段，名值对形式：{name: value}，

这样我们在发送ajax的时候就不必自己去收集表单的字段值了

form.on('submit(go)', function(data){
  //console.log(data.elem);//被执行事件的元素DOM对象，一般为button对象
  //console.log(data.form);//被执行提交的form对象，一般在存在form标签时才会返回
  //console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}

  //发送ajax

  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});

以上这篇layui原生表单验证的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui表单验证select下拉框实现验证的方法

    layui 的form表单里的select 一开始以为加上lay-verify="required"就可以验证不空了,可是反复试了几次都不能验证 代码如下: <div class="layui-form-item"> <label class="layui-form-label">所属工种:</label> <div class="layui-input-block"> <

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

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

    本文实例讲述了layui.js实现的表单验证功能.分享给大家供大家参考,具体如下: 该示例可针对文本框,手机,邮箱,textarea等格式进行验证 首先引入如下文件: <script src="layui/layui.js"></script> <script src="layui/lay/dest/layui.all.js"></script> <link rel="stylesheet"

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

    form简单验证 <input type="text" name="email" datatype="e" ignore="ignore" placeholder="请输入邮箱" autocomplete="off" class="layui-input"> datatype="e"验证邮箱 ignore="ignore&qu

  • layui的表单提交以及验证和修改弹框的实例

    HTML <div class="layui-form"> <input type="text" class="txt" name="newName" lay-verify="newName" lay-verType="tips" placeholder="请输入姓名"> <input type="text" clas

  • 在layui中使用form表单监听ajax异步验证注册的实例

    今天给大家介绍的是当下很流行的框架layui中的一个小案例.就是form表单监控提交并且使用ajax异步提交验证数据.在layui中我们想使用哪个模块就要layui.use('form',function{});这种形式要引用form内置模板,下面是HTML全部代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册</title> <

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

    废话不多说,大家直接看代码吧! <!------HTML部分---------> <form class="layui-form" action="{:url('login/login')}" method="post"> <div class="logi_content"> <p class="tit">管理系统</p> <div clas

  • layui的表单验证支持ajax判断用户名是否重复的实例

    如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持.onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证. html: <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block&q

  • layui原生表单验证的实例

    在网上看到很多validform和layer配合的验证方式,但是觉得写的不好,不清不楚的,于是研究了一下layui原生的验证 1. 在需要验证的item上加 lay-verify="value" ,在提交按钮上加 lay-submit lay-filter="go" 两个属性 value: required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证) 自定义值(就是自定义验证

  • jQuery完成表单验证的实例代码(纯代码)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <head> <meta charset=utf-8" /> <title>表单验证</title> <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css"

  • 详解表单验证正则表达式实例(推荐)

    验证:!reg.test(value) 邮箱: 复制代码 代码如下: reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/i; 不包含中文: 复制代码 代码如下: reg = /.*[\u4e00-\u9fa5]+.*$/i; 身份证号: // 验证身份证号码 var city = {11:'北京',12:'天津',13:'河北',14:'山西',15:'内蒙古',21:'辽宁',22:'吉

  • 表单验证正则表达式实例代码详解

    表单验证正则表达式实例代码详解

    表单验证正则表达式具体内容如下所示: 首先给大家解释一些符号相关的意义 1.  /^$/ 这个是个通用的格式. ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置 2. 里面输入需要实现的功能. * 匹配前面的子表达式零次或多次:        + 匹配前面的子表达式一次或多次:        ?匹配前面的子表达式零次或一次:        \d  匹配一个数字字符,等价于[0-9] 下面通过一段代码给大家分析表单验证正则表达式,具体代码如下: <!DOCTYPE html> <h

  • jquery validate.js表单验证入门实例（附源码）

    jquery validate.js表单验证入门实例（附源码）

    小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=

  • vue中使用element-ui进行表单验证的实例代码

    vue中使用element-ui进行表单验证的实例代码

    element-ui 中验证 一.简单逻辑验证(直接使用rules) 实现思路 •html中给el-form增加 :rules="rules" •html中在el-form-item 中增加属性 prop="名称" •js中直接在data中定义rules:{} •html部分 <el-form ref="form" :rules="rules" :model="form" label-width=&q

  • Vue循环组件加validate多表单验证的实例

    *父父组件(helloWorld.vue): <template> <div class="hello-world"> <el-button type="text" @click="saveAll" class="button">SAVE</el-button> <promise-father ref="promiseFather"></pr

  • React中使用async validator进行表单验证的实例代码

    react中进行表单验证毫无疑问是繁琐的,尤其对于动态添加或删除的表单,其验证逻辑更为复杂, 目前UI框架使用material ui ,但其表单处理不太理想,而后研究了一下另一个UI 框架 ant design, 其对表单的处理大大方便了逻辑的编写, 它使用async-validator处理验证逻辑 目前更换框架毫无疑问是不现实的,于是就想直接引入async-validator,下面描述一个简单的使用,具体信息可以去github上查看 validate.js import Schema from

随机推荐