首先上控制項的地址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());
});