layui lay-verify form表单自定义验证规则详解

 更新时间:2019年09月18日 14:54:50   作者:懵懂学子  
今天小编就为大家分享一篇layui lay-verify form表单自定义验证规则详解,具有很好的参考价值,相信我对大家有所帮助。一起跟随小编过来看看吧

官方文档详见: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表单自定义验证规则详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JS中数组与对象相互转换的实现方式

    JS中数组与对象相互转换的实现方式

    这篇文章主要介绍了JS中数组与对象相互转换的实现方式,文章通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-04-04
  • JavaScript实现选项卡效果的分析及步骤

    JavaScript实现选项卡效果的分析及步骤

    这篇文章主要给大家介绍了关于JavaScript实现选项卡效果的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • javaScript产生随机数的用法小结

    javaScript产生随机数的用法小结

    这篇文章主要介绍了javaScript产生随机数的用法小结,包括JavaScript Math.random()内置函数 ,Js 随机数产生6位数字的代码,需要的朋友可以参考下
    2018-04-04
  • JS实现的文件拖拽上传功能示例

    JS实现的文件拖拽上传功能示例

    这篇文章主要介绍了JS实现的文件拖拽上传功能,涉及javascript事件触发、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • JS打印方法的几种方法

    JS打印方法的几种方法

    本文主要介绍了JS打印方法的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Leaflet 数据可视化实现地图下钻示例详解

    Leaflet 数据可视化实现地图下钻示例详解

    这篇文章主要为大家介绍了Leaflet数据可视化实现地图下钻示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • js prototype深入理解及应用实例分析

    js prototype深入理解及应用实例分析

    这篇文章主要介绍了js prototype深入理解及应用,结合实例形式分析了JavaScript prototype属性功能、原理、使用方法及操作注意事项,需要的朋友可以参考下
    2019-11-11
  • JS:window.onload的使用介绍

    JS:window.onload的使用介绍

    window.onload在某些情况下还是比较实用的,比如加载时执行哪些脚本等等,下面有几个不错的示例,需要的朋友可以参考下
    2013-11-11
  • 原生js滑动轮播封装

    原生js滑动轮播封装

    这篇文章主要为大家详细介绍了原生js滑动轮播封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 利用JavaScript对中文(汉字)进行排序实例详解

    利用JavaScript对中文(汉字)进行排序实例详解

    排序是我们在日常开发中经常遇到的一个功能,下面这篇文章主要给大家介绍了利用JavaScript对中文(汉字)进行排序的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来看看吧。
    2017-06-06

最新评论