layui原生表单验证的实例


Posted in Javascript onSeptember 09, 2019

在网上看到很多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原生表单验证的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
详解React之key的使用和实践
Sep 29 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
layui的表单提交以及验证和修改弹框的实例
Sep 09 #Javascript
layui插件表单验证提交触发提交的例子
Sep 09 #Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 #Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 #Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 #Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 #Javascript
微信小程序 checkbox使用实例解析
Sep 09 #Javascript
You might like
php列出一个目录下的所有文件的代码
2012/10/09 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
js实现圆盘记速表
2015/08/03 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
python字符串常用方法
2018/06/14 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Python reduce函数作用及实例解析
2020/05/08 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
自我鉴定三原则
2014/01/13 职场文书
社区反邪教工作方案
2014/06/16 职场文书
2014年质量工作总结
2014/11/22 职场文书
语文教师求职信范文
2015/03/20 职场文书
迎新年主持词
2015/07/06 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
pytorch实现手写数字图片识别
2021/05/20 Python