快捷導(dǎo)航

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ù)組與對(duì)象相互轉(zhuǎn)換的實(shí)現(xiàn)方式
這篇文章主要介紹了JS中數(shù)組與對(duì)象相互轉(zhuǎn)換的實(shí)現(xiàn)方式，文章通過(guò)代碼示例講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-04-04
JavaScript實(shí)現(xiàn)選項(xiàng)卡效果的分析及步驟
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)選項(xiàng)卡效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
javaScript產(chǎn)生隨機(jī)數(shù)的用法小結(jié)
這篇文章主要介紹了javaScript產(chǎn)生隨機(jī)數(shù)的用法小結(jié),包括JavaScript Math.random()內(nèi)置函數(shù) ，Js 隨機(jī)數(shù)產(chǎn)生6位數(shù)字的代碼，需要的朋友可以參考下
2018-04-04
JS實(shí)現(xiàn)的文件拖拽上傳功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的文件拖拽上傳功能,涉及javascript事件觸發(fā)、頁(yè)面元素屬性動(dòng)態(tài)修改等相關(guān)操作技巧,需要的朋友可以參考下
2018-05-05
JS打印方法的幾種方法
本文主要介紹了JS打印方法的幾種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
Leaflet?數(shù)據(jù)可視化實(shí)現(xiàn)地圖下鉆示例詳解
這篇文章主要為大家介紹了Leaflet數(shù)據(jù)可視化實(shí)現(xiàn)地圖下鉆示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
js prototype深入理解及應(yīng)用實(shí)例分析
這篇文章主要介紹了js prototype深入理解及應(yīng)用,結(jié)合實(shí)例形式分析了JavaScript prototype屬性功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下
2019-11-11
JS:window.onload的使用介紹
window.onload在某些情況下還是比較實(shí)用的，比如加載時(shí)執(zhí)行哪些腳本等等，下面有幾個(gè)不錯(cuò)的示例，需要的朋友可以參考下
2013-11-11
原生js滑動(dòng)輪播封裝
這篇文章主要為大家詳細(xì)介紹了原生js滑動(dòng)輪播封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07
排序是我們?cè)谌粘ｉ_(kāi)發(fā)中經(jīng)常遇到的一個(gè)功能，下面這篇文章主要給大家介紹了利用JavaScript對(duì)中文（漢字）進(jìn)行排序的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)看看吧。
2017-06-06