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 相关文章推荐
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
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
用PHP和MySQL保存和输出图片
2006/10/09 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
php获取域名的google收录示例
2014/03/24 PHP
如何离线执行php任务
2017/02/21 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
在Python中操作字典之clear()方法的使用
2015/05/21 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
介绍一下.net和Java的特点和区别
2012/09/26 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
应届毕业生求职信
2013/11/30 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
上班看电影检讨书
2014/02/12 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
高三复习计划
2015/01/19 职场文书
学校通报表扬范文
2015/05/04 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书