[導(dǎo)入]最簡(jiǎn)單的表單驗(yàn)證框架 EasyValidation(轉(zhuǎn)載)

原始出處: http://wiki.javascud.org/display/si/Javascript_EasyValidation

最簡(jiǎn)單的表單驗(yàn)證框架 EasyValidation

原始出處: http://wiki.javascud.org/display/si/Javascript_EasyValidation

下載代碼和示例

EasyValidation3.0.zip

主要特征

• 簡(jiǎn)潔的驗(yàn)證語法
• 快速
• 無需編寫驗(yàn)證提示信息
• 支持組合驗(yàn)證
• Ajax支持
• 基于prototype.js
• 無侵入性
• 支持國(guó)際化
• 易于擴(kuò)展
• 基于標(biāo)準(zhǔn)的Html屬性(class)添加驗(yàn)證,易于其它標(biāo)準(zhǔn)的jsp taglib集成

支持瀏覽器

• IE 5.x 以上
• Mozilla 1.4 以上
• FireFox 0.9 以上
• Opera 8.5 測(cè)試通過

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真正的驗(yàn)證框架文件
• 可以添加style_min.css中的樣式聲明,也可以把style_min.css中的樣式聲明引入到你的框架js文件中去.

表單驗(yàn)證

<!-- 為form增加required-validate class,標(biāo)識(shí)需要驗(yàn)證form -->
<form id='helloworld' action="#" class='required-validate'>
	helloworld:</br>
	<!--通過class添加驗(yàn)證: required表示不能為空,min-length-15表示最小長(zhǎng)度為15 -->
	<textarea name='content' class='required min-length-15'></textarea></br>
	<input type='submit' value='Submit'/> 
	<input type='reset' value='Reset'/>
</form>

• 要是某個(gè)form中的元素被驗(yàn)證可以這樣給聲明的form中加一個(gè)class='required-validate'的屬性,框架會(huì)在load是自動(dòng)綁定所有要驗(yàn)證的域.
• 在要檢查的域中通過class屬性來聲明被檢查域的限制條件,例如上面的class='required min-length-15'表示這是一個(gè)非空,并且最小長(zhǎng)度是15的域,在編輯域失去焦點(diǎn)時(shí),會(huì)自動(dòng)檢查,如果輸入不滿足上述條件,則產(chǎn)生錯(cuò)誤提示.

驗(yàn)證效果

檢查規(guī)則

驗(yàn)證表達(dá)式	描述	示例
required	非空域,全部空格也算空
validate-number	一個(gè)有效數(shù)
validate-digits	只能包含0-9任意個(gè)數(shù)字
validate-alpha	只能是字母a-z, A-Z
validate-alphanum	只能是字母和數(shù)字的組合
validate-email	只能是有效的email
validate-url	只能是有效的url地址
validate-one-required	至少有一個(gè)被選中,例如一組checkbox, radiobutton,它們最好包含在一個(gè)div和span中
validate-integer	只能是整數(shù),可以有正負(fù)號(hào)
validate-ip	有效的IP地址
min-length-$number	最小長(zhǎng)度是$number (此處$some表示一個(gè)特定的值)	最小長(zhǎng)度為8: min-length-8
max-length-$number	最大長(zhǎng)度是$number	最大長(zhǎng)度為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	必須和某個(gè)input field相等,用于密碼兩次輸入驗(yàn)證	equals-password
less-than-$otherInputId	小于某個(gè)input field less-than-otherInputId,多用于結(jié)束日期不能小于開始日期的需求
great-than-$otherInputId	大于某個(gè)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	驗(yàn)證文件輸入域選擇的文件類型只能為聲明的$type1 – $typeX中的一種	validate-file-png-jpeg
float-range-$minValue-$maxValue	必須是$minValue到$maxValue的一個(gè)浮點(diǎn)數(shù)	1至20: float-range-1-20
int-range-$minValue-$maxValue	必須是$minValue到$maxValue的一個(gè)整數(shù)
length-range-$minLength-$maxLength	輸入字符串的長(zhǎng)度必須在$minLength到$maxLength之間
validate-pattern-$RegExp	通過自定義正則表達(dá)式$RegExp來驗(yàn)證輸入域的正確性	vaidate-pattern-/a/gi
validate-ajax-$url	通過ajax來驗(yàn)證輸入域,$url為ajax驗(yàn)證提交的地址,錯(cuò)誤提示信息將由服務(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ó)的相關(guān)驗(yàn)證)
validate-phone	有效的電話
validate-mobile-phone	有效的手機(jī)號(hào)
validate-id-number	驗(yàn)證是否有效的身份證號(hào)碼
validate-zip	驗(yàn)證郵政編碼
validate-qq	驗(yàn)證QQ號(hào)碼

數(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ó)的相關(guān)驗(yàn)證) validate-phone有效的電話 validate-mobile-phone有效的手機(jī)號(hào) validate-id-number驗(yàn)證是否有效的身份證號(hào)碼 validate-zip驗(yàn)證郵政編碼 validate-qq驗(yàn)證QQ號(hào)碼

編程式為表單增加驗(yàn)證(Validation選項(xiàng))

• 可以手工指定要驗(yàn)證那個(gè)form,在指定是可以給定一些選項(xiàng)

<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 – 是否在檢查到第一個(gè)錯(cuò)誤時(shí)就停止檢查 default- false
• immediate – 是否在被檢測(cè)域失去焦點(diǎn)時(shí)就檢查被檢查域 default - false
• focusOnError – 是否把焦點(diǎn)移動(dòng)到發(fā)生錯(cuò)誤的域上 default - true
• useTitles – 是否使用提示 default - false
• onFormValidate:當(dāng)form被檢測(cè)和的回調(diào)函數(shù),有兩個(gè)輸入?yún)?shù) arg[0]-檢測(cè)form的結(jié)果true or false, arg[1]-form本身的id
• onElementValidate:當(dāng)沒個(gè)element被檢查后的回調(diào)函數(shù),有兩個(gè)輸入?yún)?shù) arg[0]-檢測(cè)form的結(jié)果true or false, arg[1]-element本身的id

添加自己的Validator測(cè)試函數(shù)

增加Validator

/*參數(shù)說明
 * v: 為需要測(cè)試的值
 * elm: 為html input
 * args: 為有參數(shù)的驗(yàn)證表達(dá)式傳遞的參數(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']} ],
});
/*
 * 增加驗(yàn)證出錯(cuò)的提示信息
 */
Validator.messagesSourceCn = [
['max-value' , '最大值為%s'],
]

Validator的選項(xiàng):

depends – 為validator的之間的內(nèi)部依賴
ignoreEmptyValue – 表明validator是否忽略空值不進(jìn)行測(cè)試

FAQs

1. 我的網(wǎng)站現(xiàn)在使用的是UTF-8編碼,怎么使用validation_cn.js顯示中文會(huì)亂碼?
   

答:validation_cn.js默認(rèn)是使用GBK編碼,使用可以改變文件編碼的編輯器以UTF-8編碼方式再保存,如保存為validation_cn_UTF-8.js

1. 國(guó)際化怎么辦?
   

答:動(dòng)態(tài)修改Validator.messageSource即可

1. 日期之間的比較怎么辦,如結(jié)束日期要大于開始日期
   

答:先使用validate-date驗(yàn)證輸入的值是合法的日期,再加上"less-than"的比較即可

1. select的驗(yàn)證
   

答:將Please Select..的值使用一個(gè)空格填充即可

<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>

1. 在IE中提示"Unterminated string constant"或是"末結(jié)束的字符串常量"錯(cuò)誤
   

答: 是由于你網(wǎng)頁(yè)的編碼問題,validation_cn.js默認(rèn)是GBK編碼,請(qǐng)轉(zhuǎn)換成與你的網(wǎng)頁(yè)想適應(yīng)的編碼

引用

http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype/

Authors

badqiu
Ivan Li

附件:

EasyValidation3.0.zip		52861字節(jié)
validation_helloworld.jpg		14379字節(jié)

文章來源:http://www.aygfsteel.com/beansoft/archive/2007/04/03/108184.html

posted on 2007-08-17 16:29 陳貴波 閱讀(768) 評(píng)論(1)  編輯  收藏