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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
javascript编程起步(第一课)
Jan 10 Javascript
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 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
基于文本的留言簿
2006/10/09 PHP
一个好用的分页函数
2006/11/16 PHP
php mysql数据库操作类
2008/06/04 PHP
php在字符串中查找另一个字符串
2008/11/19 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
JS backgroundImage控制
2009/05/19 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Python 实现微信防撤回功能
2019/04/29 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python3注册全局热键的实现
2020/03/22 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
python实现简单文件读写函数
2021/02/25 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
民族团结先进个人材料
2014/02/05 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
高一新生军训感言
2014/03/02 职场文书
二审答辩状格式
2015/05/22 职场文书
用python画城市轮播地图
2021/05/28 Python