驗證控制項jQuery Validation Engine簡單自定義正則表達式

来源:http://www.cnblogs.com/hanyining/archive/2016/10/12/5953159.html
-Advertisement-
Play Games

首先上控制項的地址http://code.ciaoca.com/jquery/validation-engine/ 具體使用方式網站里說的很清楚,我寫這篇文章主要是用於記錄如何自己添加自定義正則表達式,這個問題折騰了幾次,剛剛纔會搞。網上也查了很多,都沒有說到點子上的,也許是我太笨沒看懂。 進入正題, ...


首先上控制項的地址http://code.ciaoca.com/jquery/validation-engine/

具體使用方式網站里說的很清楚,我寫這篇文章主要是用於記錄如何自己添加自定義正則表達式,這個問題折騰了幾次,剛剛纔會搞。網上也查了很多,都沒有說到點子上的,也許是我太笨沒看懂。

進入正題,這個控制項很強大,裡面的驗證足夠我們使用,但是有時候我們項目需求可能比較獨特,這裡面沒有怎麼辦?那就得自己寫一個正則然後匹配了,但是我一開始就怎麼都找不到該往哪裡填入自定義正則。

以上是網站里寫的,但是這段該往哪裡填呢?在我們引入文件的時候,會引入這個文件<script src="js/jquery.validationEngine-zh_CN.js"></script>,是在這個文件里填!

當然聰明的人可能早找到地方了,但是我比較笨,到最後才想到是不是填到源文件里,果不其然。

'everyName': {
'regex': '^[\u4E00-\u9FA5]+$|^[0-9]*$|\·',     /* 自定義正則表達式 */
'alertText': '無效的姓名'      /* 驗證不通過時的提示 */
}

這段是我填入的正則,是為了匹配一個姓名,要求是數字、漢字、外帶一個“·”,不符合則提示錯誤,符合則通過,當然這種鬼一般不會有通用的正則,得你自己寫或者合併。

在這裡我要說幾點小細節,這是我本次碰到的問題:

1.寫正則的時候要記得將regex放在引號中

2.想要讓幾個正則組合同時匹配,用‘|’這個豎杠,這裡要註意,用|貌似只能單方面匹配,也就是說當我寫一個正則讓匹配數字、漢字、外帶一個“·”,他們單獨輸入的時候是正確通過的,但是如果合併在一起,或者任意兩個搭配,那麼就會不通過。所以我今天又換了種寫法,^[\u4E00-\u9FA50-9\·]+$  ^是開始的意思$是結尾的意思+是至少匹配一次\u4E00-\u9FA5是漢字0-9是數字\·代表·,用[]把他們匹配要求括起來, []用來自定義能夠匹配 '多種字元' 的表達式。

3.想要匹配某個特殊字元,例如我這個點“·”,那麼只需要加個斜杠就可以例如\·,或者說你就要匹配一個字,例如想讓“js”這兩個字母也符合要求,因為我們的要求是中文和數字,英文是不符合要求的,我只想讓這兩個字母也符合要求怎麼辦?  \js這樣就可以了

 

接下來我說一下這個控制項的基礎用法:

1首先引入文件

<link rel="stylesheet" href="css/validationEngine.jquery.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.validationEngine-zh_CN.js"></script>
<script src="js/jquery.validationEngine.js"></script>

2然後給表單添加id
<form id="form_id" ...>
...
</form>

3開始在表單中使用

<input id="selectName1" type="text" class="validate[required,custom[everyName]]"  data-errormessage-value-missing="* 此處不可空白" data-errormessage="* 字元格式不正確,請重新輸入"  />

首先,所有的驗證都是在input的class里添加,validate[required]為必填的意思,而custom[everyName]則是正則匹配的要求了,具體可以看網站里,我這裡的everyName是我自定義的。我試驗了下custom[]內部只能填入一個且它本身也只能存在一個,不能多個。而validate[]的括弧裡面則可以填入多個,以逗號隔開,但是validate的本身只能存在一個。

validate[required,custom[number],maxSize[20],min[0]]   這段的意思是這是一個必填項,同時裡面只能是數字,最多輸入字元數為20,其中最小值為0

data-errormessage-value-missing="* 此處不可空白"   這段暫時理解為,如果含有required,它就會提示這句話,這句話可以自定義

data-errormessage="* 字元格式不正確,請重新輸入"   這段的理解暫時為,如果不為空了,那麼如果不符合我們自定義的正則及各種要求(只能是數字,最多輸入字元數為20,其中最小值為0),則提示這句話,這句話也可以自定義。

以上就是這次使用的總結,主要是給自己看,以後如果忘了還能翻回來看O(∩_∩)O~

再記錄一個,就是如果項目有開始時間和結束時間的話,要求是當選擇了開始時間,那麼在結束時間中,開始時間之前的就都不能被選擇。反之,如果選擇了結束時間,那麼開始時間必須要在結束時間之前,之後的也都無法選擇。需要一個js來控制。因為我們是用的bootstrap-datepicker這個控制項,暫時在這裡記錄一下。

$(".times_ipt").eq(0).change(function(){
$(".times_ipt").eq(1).datepicker('setStartDate', $(this).val());
});
$(".times_ipt").eq(1).change(function(){
$(".times_ipt").eq(0).datepicker('setEndDate', $(this).val());
});
$(".times_p").eq(0).change(function(){
$(".times_p").eq(1).datepicker('setStartDate', $(this).val());
});
$(".times_p").eq(1).change(function(){
$(".times_p").eq(0).datepicker('setEndDate', $(this).val());
});

 

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 實現效果一樣,禁止複製。 區別: oncopy="document.selection.empty()" 沒禁止,只是把它複製的內容,變成空了; oncopy="return false"是禁止複製。 ...
  • 需要準備:jQuery Bootstrap 天氣預報API(本文中使用API可能會失效請靈活運用) CSS樣式可以你自己去寫這裡只提出jQuery 請求數據和解析JSON數據 上面是要用到的JSON數據格式 搭建界面略過 根據JSON中數據添加到HTML中 解析數據到HTML中 其中一定要註意 跨域 ...
  • 目的 template綁定(模板綁定)使用渲染模板的結果填充關聯的DOM元素。 模板是一種簡單方便的方式來構建複雜的UI結構 。 下麵介紹兩種使用模板綁定的方法: 本地模板是支持foreach,if,with和其他控制流綁定的機制。 在內部,這些控制流綁定捕獲元素中包含的HTML標記,並將其用作模板... ...
  • 之前看別人寫的插件經常會用到RegExp對象來驗證輸入,並且獲取一些那時我並不曉得是什麼東西的數組,來取值進行自定義的邏輯處理。今天學習了一下RegExp類型。終於有了一個初步的瞭解,至少不會看一會就感覺蒙圈了,記錄分享一下 ECMAScript通過RegExp類型來支持正則表達式 語法如下 其中 ...
  • 這章與上一張《jQuery input 下拉框焦點事件》類似 這章講述div的焦點事件如何使用 div的焦點事件與input的焦點事件區別在於 需要多添加一個屬性:tabindex; (Safari可能不支持) 這個屬性是可以讓鍵盤獲取到焦點事件,當然,我們只是用這個屬性來讓div有焦點而已;為了不 ...
  • 一、HTML 二、最基本的HTML結構 三、最常用的HTML標簽 a、佈局標簽 div標簽定義文檔中的分區或節(division/section),可以把文檔分割為獨立的、不同的部分,主要用於佈局。 aside標簽的內容可用作文章的側欄,html5新增標簽。 header標簽定義頁面的頭部(介紹信息 ...
  • 一看就懂。走起! ...
  • <marquee>知識點 現在這個標簽不主張使用,因為不符合w3c標準(結構、樣式、行為)功能性分離。 1.behavior滾動的方式 【alternate】:表示在兩端之間來回滾動 【scroll】:表示由一端滾動到另一端,會重覆 【slide】:表示由一端滾動到另一端,不會重覆 2.direct ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...