基於prototype的web驗證架構

prototype.js是所有的基礎

validation.js真正的驗證架構檔案,badqiu在原來的基礎上增加了許多不錯的功能

1:引用js檔案

<script>"prototype.js"
type="text/javascript">
</script>
<script>"validation.js"
type="text/javascript">
</script>

2:引用css檔案

可以參加style_min.css中的樣式聲明,也可以把style_min.css中的樣式聲明引入到你的架構js檔案中去.

3:hellow world

在badqiu的擴充中如果要是某個form中的元素被驗證可以這樣給聲明的form中加一個class='required-validate'的屬性,架構會在load是自動綁定

所有要驗證的域.

xml 代碼

<!-- 為form增加required-validate class,標識需要驗證form -->
　　<form id='helloworld' action="#" class='required-validate'>
　　 　helloworld:<!--</span-->br>
　　 　<!--通過class添加驗證: required表示不可為空,min-length-15表示最小長度為15 -->
　　 　<textarea name='content' class='required min-length-2'><!--</span-->textarea><!--</span-->br>
　　 　<input type='submit' value='Submit'/>
　　 　<input type='reset' value='Reset'/>
<!--</span-->form>

在要檢查的域中通過class屬性來聲明被檢查域的限制條件,例如上面的class='required min-length-2'表示這是一個非空,並且最小長度是2的域,在編輯域失去焦點時,會自動檢查,如果輸入不滿足上述條件,則產生錯誤提示.

4:檢查規則說明

required -- 非空域

validate-number -- 一個有效數

validate-digits -- 只能包含[0-9]任意個數字

validate-alpha -- 只能是字母[a-zA-Z]

validate-alphanum -- 只能是字母和數位組合

validate-date -- 只能是日期

validate-email -- 只能是有效email

validate-url -- 只能是有效url地址

validate-date-au -- 日期的形式必須是dd/mm/yyyy

validate-one-required -- 至少有一個被選中,例如一組checkbox, radiobutton,它們最好包含在一個div和span中

validate-date-cn -- 日期的形式必須是yyyy/mm/dd

validate-integer -- 只能是整數,可以有加號或減號

validate-chinese -- 只能是中文

validate-ip -- 有效IP地址

validate-phone -- 有效電話(僅適用於中國)

validate-mobile-phone -- 有效手機號,在badqiu的版本中只驗證了135的,有待改進

validate-equals-$otherInputId -- 必須和某個input field相等例如 validate-equals-otherInputId(此處$some表示一個特定的值)

less-than-$otherInputId -- 小於某個input field less-than-otherInputId(此處$some表示一個特定的值)

great-than-$otherInputId -- 大於某個input field less-than-otherInputId(此處$some表示一個特定的值)

min-length-$number -- 最小長度是$number(此處$some表示一個特定的值)

max-length-$number -- 最大長度是$number(此處$some表示一個特定的值)

validate-file-$type1-$type2-$typeX -- file的input必須是聲明的$type1 -- $typeX中的一種

validate-float-range-$minValue-$maxValue -- 必須是$minValue到$maxValue的一個浮點數

validate-int-range-$minValue-$maxValue -- 必須是$minValue到$maxValue的一個整數

validate-length-range-$minLength-$maxLength -- 輸入字串的長度必須在$minLength到$maxLength之間

max-value-$number -- 輸入欄位的最大值是$number

min-value-$number -- 輸入欄位的最小值是$number

validate-pattern-$patternAttributes -- 通過自訂pattern來驗證輸入欄位的正確性

validate-ajax -- 通過ajax來驗證輸入欄位