[導入]最簡單的表單驗證框架 EasyValidation(轉載)

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

最簡單的表單驗證框架 EasyValidation

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

下載代碼和示例

EasyValidation3.0.zip

主要特征

• 簡潔的驗證語法
• 快速
• 無需編寫驗證提示信息
• 支持組合驗證
• Ajax支持
• 基于prototype.js
• 無侵入性
• 支持國際化
• 易于擴展
• 基于標準的Html屬性(class)添加驗證,易于其它標準的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是所有的基礎
• validation_cn.js真正的驗證框架文件
• 可以添加style_min.css中的樣式聲明,也可以把style_min.css中的樣式聲明引入到你的框架js文件中去.

表單驗證

<!-- 為form增加required-validate class,標識需要驗證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的域,在編輯域失去焦點時,會自動檢查,如果輸入不滿足上述條件,則產生錯誤提示.

驗證效果

檢查規則

驗證表達式	描述	示例
required	非空域,全部空格也算空
validate-number	一個有效數
validate-digits	只能包含0-9任意個數字
validate-alpha	只能是字母a-z, A-Z
validate-alphanum	只能是字母和數字的組合
validate-email	只能是有效的email
validate-url	只能是有效的url地址
validate-one-required	至少有一個被選中,例如一組checkbox, radiobutton,它們最好包含在一個div和span中
validate-integer	只能是整數,可以有正負號
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,多用于結束日期不能小于開始日期的需求
great-than-$otherInputId	大于某個input field less-than-otherInputId
validate-date-$dateFormat	只能是日期,$dateFormat為日期格式,$dateFormat的可選,默認格式為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的一個浮點數	1至20: float-range-1-20
int-range-$minValue-$maxValue	必須是$minValue到$maxValue的一個整數
length-range-$minLength-$maxLength	輸入字符串的長度必須在$minLength到$maxLength之間
validate-pattern-$RegExp	通過自定義正則表達式$RegExp來驗證輸入域的正確性	vaidate-pattern-/a/gi
validate-ajax-$url	通過ajax來驗證輸入域,$url為ajax驗證提交的地址,錯誤提示信息將由服務器端返回. 數據示例 <input name="username" value="badqiu"/>, 提交數據為:username=badqiu&what=username&value=badqiu what為input的name,value為input的value	validate-ajax-http://localhost/valiate-email.jsp
validate-chinese	只能是中文(以下為中國的相關驗證)
validate-phone	有效的電話
validate-mobile-phone	有效的手機號
validate-id-number	驗證是否有效的身份證號碼
validate-zip	驗證郵政編碼
validate-qq	驗證QQ號碼

數據示例

<input name="username" value="badqiu"/>,提交數據為:username=badqiu&what=username&value=badqiu
what為input的name,value為input的valuevalidate-ajax-http://localhost/valiate-email.jsp

validate-chinese只能是中文(以下為中國的相關驗證) 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>

創建Valuedation是的參數說明

• onSubmit – 是否綁定onSubmit函數, default - true
• stopOnFirst – 是否在檢查到第一個錯誤時就停止檢查 default- false
• immediate – 是否在被檢測域失去焦點時就檢查被檢查域 default - false
• focusOnError – 是否把焦點移動到發生錯誤的域上 default - true
• useTitles – 是否使用提示 default - false
• onFormValidate:當form被檢測和的回調函數,有兩個輸入參數 arg[0]-檢測form的結果true or false, arg[1]-form本身的id
• onElementValidate:當沒個element被檢查后的回調函數,有兩個輸入參數 arg[0]-檢測form的結果true or false, arg[1]-element本身的id

添加自己的Validator測試函數

增加Validator

/*參數說明
 * v: 為需要測試的值
 * elm: 為html input
 * args: 為有參數的驗證表達式傳遞的參數,如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的之間的內部依賴
ignoreEmptyValue – 表明validator是否忽略空值不進行測試

FAQs

1. 我的網站現在使用的是UTF-8編碼,怎么使用validation_cn.js顯示中文會亂碼?
   

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

1. 國際化怎么辦?
   

答:動態修改Validator.messageSource即可

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

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

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

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

答: 是由于你網頁的編碼問題,validation_cn.js默認是GBK編碼,請轉換成與你的網頁想適應的編碼

引用

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

Authors

badqiu
Ivan Li

附件:

EasyValidation3.0.zip		52861字節
validation_helloworld.jpg		14379字節

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

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