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 相关文章推荐
字符串的replace方法应用浅析
Dec 06 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php实现两个数组相加的方法
2015/02/17 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
VBScript版代码高亮
2006/06/26 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
Python实现控制台进度条功能
2016/01/04 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
python中format函数如何使用
2020/06/22 Python
python批量修改文件名的示例
2020/09/27 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
最好的商品表达自己:Cafepress
2019/09/04 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
.net面试题
2015/12/22 面试题
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
学院书画协会部门职责
2013/11/28 职场文书
校本教研工作制度
2014/01/22 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
校外活动方案
2014/08/28 职场文书