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 相关文章推荐
JavaScript中“基本类型”之争小结
Jan 03 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
jquery提示效果实例分析
Nov 25 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
Vue EventBus自定义组件事件传递
Jun 25 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
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
JavaScript实现Excel表格效果
2020/02/07 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
Vue3为什么这么快
2020/09/23 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
Python对象属性自动更新操作示例
2018/06/15 Python
Tensorflow 实现释放内存
2020/02/03 Python
Python编写单元测试代码实例
2020/09/10 Python
python 6种方法实现单例模式
2020/12/15 Python
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
孝敬父母的演讲稿
2014/05/14 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
Redis 哨兵机制及配置实现
2022/03/25 Redis
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技