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自定义事件及事件交互原理概述(二)
Feb 01 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
Angular如何由模板生成DOM树的方法
Dec 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
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
vue实现信息管理系统
2020/05/30 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
python文件操作相关知识点总结整理
2016/02/22 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python正则表达式的使用
2017/06/12 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
python画双y轴图像的示例代码
2019/07/07 Python
python/golang 删除链表中的元素
2020/09/14 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
大学自我鉴定
2013/12/20 职场文书
企业承诺书格式
2014/05/21 职场文书
计算机系本科生求职信
2014/05/31 职场文书
督导岗位职责范本
2015/04/10 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python