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自动判断浏览器分辨率的代码
Jan 28 Javascript
JavaScript之自定义类型
May 04 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
Javascript 命名空间模式
Nov 01 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 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 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
Python中的自省(反射)详解
2015/06/02 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python  Django 母版和继承解析
2019/08/09 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
打架检讨书300字
2014/02/02 职场文书
美食节目策划方案
2014/05/31 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL