layui lay-verify form表單自定義驗(yàn)證規(guī)則詳解

更新時(shí)間：2019年09月18日 14:54:50 作者：懵懂學(xué)子

今天小編就為大家分享一篇layui lay-verify form表單自定義驗(yàn)證規(guī)則詳解，具有很好的參考價(jià)值，相信我對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

官方文檔詳見(jiàn)：https://www.layui.com/doc/modules/form.html#verify

雖然layui的官方文檔已經(jīng)是寫(xiě)的比較詳細(xì)，但是初次使用的時(shí)候總會(huì)懵一下，這里紀(jì)錄一下lay-verify自定義驗(yàn)證規(guī)則的時(shí)候到底放哪。

html：

<input type="text" lay-verify="digital" placeholder="請(qǐng)輸入數(shù)字">
<button type="button" class="layui-btn layui-btn-norma" lay-submit lay-filter="submit_button">提交</button>

js：

form.verify({
 //數(shù)組的兩個(gè)值分別代表：[正則匹配、匹配不符時(shí)的提示文字]
 ,digital: [
  /^[0-4]*$/
 ,'請(qǐng)?zhí)钊?-4的分?jǐn)?shù)'
 ] 
});

這樣寫(xiě)沒(méi)問(wèn)題，但是form.verify放置的位置沒(méi)講清楚，還是要自己試一下。

layui.use(['form'], function () {
  var form = layui.form;
  //要放在form.on外面，千萬(wàn)不能放在提交步驟中，否則會(huì)不觸發(fā)
  form.verify({
   //數(shù)組的兩個(gè)值分別代表：[正則匹配、匹配不符時(shí)的提示文字]
   digital: [
    /^[0-4]*$/
    ,'請(qǐng)?zhí)钊?-4的分?jǐn)?shù)'
   ]
  });
  form.on("submit(submit_button)", function (data) {
   return false;
  });
 });

以上這篇layui lay-verify form表單自定義驗(yàn)證規(guī)則詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js中數(shù)組結(jié)合字符串實(shí)現(xiàn)查找(屏蔽廣告判斷url等)
這篇文章主要介紹了js中數(shù)組結(jié)合字符串實(shí)現(xiàn)查找(屏蔽廣告判斷url等),需要的朋友可以參考下
2016-03-03
微信小程序?qū)W習(xí)筆記之頁(yè)面配置與路由方式
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)筆記之頁(yè)面配置與路由方式的相關(guān)資料,頁(yè)面配置和路由是學(xué)習(xí)微信小程序必然會(huì)遇到的,本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-06-06
JS實(shí)現(xiàn)可改變列寬的table實(shí)例
本文為大家詳細(xì)介紹下通過(guò)JS實(shí)現(xiàn)可改變列寬的table，具體的思路及代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07
微信小程序中換行空格（多個(gè)空格）寫(xiě)法詳解
這篇文章主要介紹了微信小程序中換行空格（多個(gè)空格）寫(xiě)法詳解,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-07-07
淺談JS的二進(jìn)制家族
事實(shí)上，前端很少涉及對(duì)二進(jìn)制數(shù)據(jù)的處理，但即便如此，我們偶爾總能在角落里看見(jiàn)它們的身影。今天我們就來(lái)聊一聊前端的二進(jìn)制家族：Blob、ArrayBuffer和Buffer
2021-05-05
js/jq仿window文件夾框選操作插件
這篇文章主要介紹了js/jq仿window文件夾框選操作插件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
深入理解JavaScript中的并行處理
這篇文章給大家詳細(xì)介紹了JavaScript中的并行處理，一直以來(lái)，JavaScript 都并沒(méi)有多線程的能力，而單線程在讓開(kāi)發(fā)者方便的同時(shí)，也使它一直不能處理計(jì)算量復(fù)雜的場(chǎng)景，唯一方法就是讓服務(wù)端去做。下來(lái)通過(guò)這篇文章我們一起來(lái)看看詳細(xì)介紹。
2016-09-09
js實(shí)現(xiàn)瀑布流的一種簡(jiǎn)單方法實(shí)例分享
現(xiàn)在說(shuō)瀑布流式布局似乎有點(diǎn)晚了，但是每一項(xiàng)技術(shù)都是向著“精”和“簡(jiǎn)”的方向在不斷發(fā)展，在發(fā)展到極致之前，需要一個(gè)相當(dāng)漫長(zhǎng)的過(guò)程，因此，從這個(gè)角度來(lái)說(shuō)，當(dāng)瀑布流被應(yīng)用得越來(lái)越多的時(shí)候，反而更應(yīng)該討論它，討論如何將它改善
2013-11-11
AngularJS+Bootstrap實(shí)現(xiàn)多文件上傳與管理
這篇文章主要為大家詳細(xì)介紹了AngularJS+Bootstrap實(shí)現(xiàn)多文件上傳與管理，對(duì)上傳文件進(jìn)行加載與刪除操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
詳解JavaScript的計(jì)時(shí)器和按鈕效果設(shè)置
這篇文章主要為大家介紹了JavaScript的計(jì)時(shí)器和按鈕效果設(shè)置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12