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面向对象、prototype、call()、apply()
May 14 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 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
调试PHP程序的多种方法介绍
2014/11/06 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
Python编码爬坑指南(必看)
2016/06/10 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
简单实现python数独游戏
2018/03/30 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
JPA的特点
2014/10/25 面试题
如何安装ruby on rails
2014/02/09 面试题
材料化学应届生求职信
2013/10/09 职场文书
学生生病请假条范文
2014/02/16 职场文书
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
yolov5返回坐标的方法实例
2022/03/17 Python
公历12个月名称的由来
2022/04/12 杂记
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS