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 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
layui清除radio的选中状态实例
Nov 14 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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
当海贼王变成JOJO风
2020/03/02 日漫
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHPMailer发送邮件
2016/12/28 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
Python 多线程抓取图片效率对比
2016/02/27 Python
浅谈Python的异常处理
2016/06/19 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
大数据分析用java还是Python
2020/07/06 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
党员剖析材料范文
2014/09/30 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
《观察物体》教学反思
2016/02/17 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis