layui lay-verify form表单自定义验证规则详解


Posted in Javascript onSeptember 18, 2019

官方文档详见:https://www.layui.com/doc/modules/form.html#verify

虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪。

html:

<input type="text" lay-verify="digital" placeholder="请输入数字">
<button type="button" class="layui-btn layui-btn-norma" lay-submit lay-filter="submit_button">提交</button>

js:

form.verify({
 //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
 ,digital: [
  /^[0-4]*$/
 ,'请填入0-4的分数'
 ] 
});

这样写没问题,但是form.verify放置的位置没讲清楚,还是要自己试一下。

layui.use(['form'], function () {
  var form = layui.form;
  //要放在form.on外面,千万不能放在提交步骤中,否则会不触发
  form.verify({
   //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
   digital: [
    /^[0-4]*$/
    ,'请填入0-4的分数'
   ]
  });
  form.on("submit(submit_button)", function (data) {
   return false;
  });
 });

以上这篇layui lay-verify form表单自定义验证规则详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
原生JS实现层叠轮播图
May 17 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 #Javascript
Vue Components 数字键盘的实现
Sep 18 #Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 #Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 #Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 #Javascript
Typescript的三种运行方式(小结)
Sep 18 #Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 #Javascript
You might like
Zend 输出产生XML解析错误
2009/03/03 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
php中autoload的用法总结
2013/11/08 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
wxPython框架类和面板类的使用实例
2014/09/28 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
python修改文件内容的3种方法详解
2019/11/15 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
工会主席岗位责任制
2014/02/11 职场文书
给校长的建议书500字
2014/05/15 职场文书
法律系毕业生求职信
2014/05/28 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
PHP RabbitMQ消息列队
2022/05/11 PHP