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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 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
php SQL防注入代码集合
2008/04/25 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
基于python select.select模块通信的实例讲解
2017/09/21 Python
浅析Git版本控制器使用
2017/12/10 Python
python实现UDP协议下的文件传输
2020/03/20 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
C++的几个面试题附答案
2016/08/03 面试题
社团成立邀请函
2014/01/08 职场文书
给医务人员表扬信
2014/01/12 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
教师个人事迹材料
2014/12/17 职场文书
班主任自我评价范文
2015/03/11 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server