原始出處: http://wiki.javascud.org/display/si/Javascript_EasyValidation
最簡單的表單驗證框架 EasyValidation
原始出處:
http://wiki.javascud.org/display/si/Javascript_EasyValidation
下載代碼和示例
EasyValidation3.0.zip
主要特征
- 簡潔的驗證語法
- 快速
- 無需編寫驗證提示信息
- 支持組合驗證
- Ajax支持
- 基于prototype.js
- 無侵入性
- 支持國際化
- 易于擴展
- 基于標(biāo)準(zhǔn)的Html屬性(class)添加驗證,易于其它標(biāo)準(zhǔn)的jsp taglib集成
支持瀏覽器
- IE 5.x 以上
- Mozilla 1.4 以上
- FireFox 0.9 以上
- Opera 8.5 測試通過
helloworld示例
引用文件
<script src="prototype.js" type="text/javascript"></script>
<script src="validation_cn.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style_min.css"/>
- prototype.js是所有的基礎(chǔ)
- validation_cn.js真正的驗證框架文件
- 可以添加style_min.css中的樣式聲明,也可以把style_min.css中的樣式聲明引入到你的框架js文件中去.
表單驗證
<!-- 為form增加required-validate class,標(biāo)識需要驗證form -->
<form id='helloworld' action="#" class='required-validate'>
helloworld:</br>
<!--通過class添加驗證: required表示不能為空,min-length-15表示最小長度為15 -->
<textarea name='content' class='required min-length-15'></textarea></br>
<input type='submit' value='Submit'/>
<input type='reset' value='Reset'/>
</form>
- 要是某個form中的元素被驗證可以這樣給聲明的form中加一個class='required-validate'的屬性,框架會在load是自動綁定所有要驗證的域.
- 在要檢查的域中通過class屬性來聲明被檢查域的限制條件,例如上面的class='required min-length-15'表示這是一個非空,并且最小長度是15的域,在編輯域失去焦點時,會自動檢查,如果輸入不滿足上述條件,則產(chǎn)生錯誤提示.
驗證效果
檢查規(guī)則
| 驗證表達式 |
描述 |
示例 |
| required |
非空域,全部空格也算空 |
|
| validate-number |
一個有效數(shù) |
|
| validate-digits |
只能包含0-9任意個數(shù)字 |
|
| validate-alpha |
只能是字母a-z, A-Z |
|
| validate-alphanum |
只能是字母和數(shù)字的組合 |
|
| validate-email |
只能是有效的email |
|
| validate-url |
只能是有效的url地址 |
|
| validate-one-required |
至少有一個被選中,例如一組checkbox, radiobutton,它們最好包含在一個div和span中 |
|
| validate-integer |
只能是整數(shù),可以有正負號 |
|
| validate-ip |
有效的IP地址 |
|
| min-length-$number |
最小長度是$number (此處$some表示一個特定的值) |
最小長度為8: min-length-8 |
| max-length-$number |
最大長度是$number |
最大長度為8: max-length-8 |
| max-value-$number |
輸入域的最大值是$number |
最大值為8.1: max-value-8.1 |
| min-value-$number |
輸入域的最小值是$number |
最大值為-8.1: max-value--8.1 |
| equals-$otherInputId |
必須和某個input field相等,用于密碼兩次輸入驗證 |
equals-password |
| less-than-$otherInputId |
小于某個input field less-than-otherInputId,多用于結(jié)束日期不能小于開始日期的需求 |
|
| great-than-$otherInputId |
大于某個input field less-than-otherInputId |
|
| validate-date-$dateFormat |
只能是日期,$dateFormat為日期格式,$dateFormat的可選,默認(rèn)格式為yyyy-MM-DD |
validate-date-yyyy年MM月dd日 |
| validate-file-$type1-$type2-$typeX |
驗證文件輸入域選擇的文件類型只能為聲明的$type1 – $typeX中的一種 |
validate-file-png-jpeg |
| float-range-$minValue-$maxValue |
必須是$minValue到$maxValue的一個浮點數(shù) |
1至20: float-range-1-20 |
| int-range-$minValue-$maxValue |
必須是$minValue到$maxValue的一個整數(shù) |
|
| length-range-$minLength-$maxLength |
輸入字符串的長度必須在$minLength到$maxLength之間 |
|
| validate-pattern-$RegExp |
通過自定義正則表達式$RegExp來驗證輸入域的正確性 |
vaidate-pattern-/a/gi |
| validate-ajax-$url |
通過ajax來驗證輸入域,$url為ajax驗證提交的地址,錯誤提示信息將由服務(wù)器端返回.
數(shù)據(jù)示例 <input name="username" value="badqiu"/>,
提交數(shù)據(jù)為:username=badqiu&what=username&value=badqiu
what為input的name,value為input的value |
validate-ajax-http://localhost/valiate-email.jsp |
| validate-chinese |
只能是中文(以下為中國的相關(guān)驗證) |
|
| validate-phone |
有效的電話 |
|
| validate-mobile-phone |
有效的手機號 |
|
| validate-id-number |
驗證是否有效的身份證號碼 |
|
| validate-zip |
驗證郵政編碼 |
|
| validate-qq |
驗證QQ號碼 |
|
數(shù)據(jù)示例
<input name="username" value="badqiu"/>,提交數(shù)據(jù)為:username=badqiu&what=username&value=badqiu
what為input的name,value為input的valuevalidate-ajax-http://localhost/valiate-email.jsp
validate-chinese只能是中文(以下為中國的相關(guān)驗證)
validate-phone有效的電話
validate-mobile-phone有效的手機號
validate-id-number驗證是否有效的身份證號碼
validate-zip驗證郵政編碼
validate-qq驗證QQ號碼
編程式為表單增加驗證(Validation選項)
- 可以手工指定要驗證那個form,在指定是可以給定一些選項
<script type="text/javascript">
var valid = new Validation('form-id', {onSubmit:false});
// do something ...
var result = valid.validate();
</script>
創(chuàng)建Valuedation是的參數(shù)說明
- onSubmit – 是否綁定onSubmit函數(shù), default - true
- stopOnFirst – 是否在檢查到第一個錯誤時就停止檢查 default- false
- immediate – 是否在被檢測域失去焦點時就檢查被檢查域 default - false
- focusOnError – 是否把焦點移動到發(fā)生錯誤的域上 default - true
- useTitles – 是否使用提示 default - false
- onFormValidate:當(dāng)form被檢測和的回調(diào)函數(shù),有兩個輸入?yún)?shù) arg[0]-檢測form的結(jié)果true or false, arg[1]-form本身的id
- onElementValidate:當(dāng)沒個element被檢查后的回調(diào)函數(shù),有兩個輸入?yún)?shù) arg[0]-檢測form的結(jié)果true or false, arg[1]-element本身的id
添加自己的Validator測試函數(shù)
增加Validator
/*參數(shù)說明
* v: 為需要測試的值
* elm: 為html input
* args: 為有參數(shù)的驗證表達式傳遞的參數(shù),如min-length-10,則args[0]為10
* metadata: 為Validator本身
*/
Validation.add(['max-value',function(v,elm,args,metadata) {
return parseFloat(v) <= parseFloat(args[0]);
},{depends : ['validate-number']} ],
});
/*
* 增加驗證出錯的提示信息
*/
Validator.messagesSourceCn = [
['max-value' , '最大值為%s'],
]
Validator的選項:
depends – 為validator的之間的內(nèi)部依賴
ignoreEmptyValue – 表明validator是否忽略空值不進行測試
FAQs
- 我的網(wǎng)站現(xiàn)在使用的是UTF-8編碼,怎么使用validation_cn.js顯示中文會亂碼?
答:validation_cn.js默認(rèn)是使用GBK編碼,使用可以改變文件編碼的編輯器以UTF-8編碼方式再保存,如保存為validation_cn_UTF-8.js
- 國際化怎么辦?
答:動態(tài)修改Validator.messageSource即可
- 日期之間的比較怎么辦,如結(jié)束日期要大于開始日期
答:先使用validate-date驗證輸入的值是合法的日期,再加上"less-than"的比較即可
- select的驗證
答:將Please Select..的值使用一個空格填充即可
<select id="test" name="test" class="required">
<option value=" ">Please Select..</option>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
</select>
- 在IE中提示"Unterminated string constant"或是"末結(jié)束的字符串常量"錯誤
答: 是由于你網(wǎng)頁的編碼問題,validation_cn.js默認(rèn)是GBK編碼,請轉(zhuǎn)換成與你的網(wǎng)頁想適應(yīng)的編碼
引用
http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype/
Authors
badqiu
Ivan Li
附件:
文章來源:
http://www.aygfsteel.com/beansoft/archive/2007/04/03/108184.html