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高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
详解angular element()方法使用
Apr 08 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
JS实现吸顶特效
Jan 08 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
vue3中的组件间通信
Mar 31 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 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遍历目录viewDir函数
2009/12/15 PHP
PHP中的Memcache详解
2014/04/05 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
js Function类型
2011/12/04 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
Javascript中replace()小结
2015/09/30 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
详解javascript void(0)
2020/07/13 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
python类参数self使用示例
2014/02/17 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
python人民币小写转大写辅助工具
2018/06/20 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
应届生财务管理求职信
2013/11/06 职场文书
品管员岗位职责
2013/11/10 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
2015年中秋节主持词
2015/07/30 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript