前些日子寫過的,但是不知怎么的,在FireFox上可以看,在IE下看不到文章。所以只好刪掉,重寫一次。
初學JavaEE,什么都不知道,在論壇瀏覽的時候,偶爾看到一個頁面驗證的js文件,感覺
很好,甚是感謝寫這些工具的高手,憧憬自己有一天也能寫出供大家使用的工具函數。
Badqiu在原來外國那哥們寫的基礎上又加了一些功能,但是他給的是GBK 編碼的文件,我
覺得UTF-8比較方便,自己用記事本另存了一下為UTF-8模式。
Validation.js 的使用。
1. 在網頁中引入一下文件:
<script type='text/javascript' src='../script/prototype.js'></script>
<script type='text/javascript' src='../script/validation.js'></script>
<script type="text/javascript" src="../script/effects.js"></script>
<link rel="stylesheet" type="text/css" href="script/style.css" />
由于prototype升級了,可能導致報錯,badqiu說是effects.js兼容性問題,這是一個樣
式效果文件??梢圆挥迷囋嚳矗恍械脑捑褪褂盟詭У膒rototype文件。
2. 在body后面加入一個sctipt
<script type="text/javascript">
var validation = new Validation("form1", {
immediate :true,
onSubmit :true,
stopOnFirst :true
});
function saveU(){
var result=validation.validate();
if(result)
{
//dosomething.....
}
}
</script>
onSubmit : true, 校驗監聽form提交事件
stopOnFirst : false, form校驗不通過 遇到第一個出錯的就停止校驗 不進行其余
元素的校驗
immediate : false, form元素 焦點失去的時候 校驗否
focusOnError : true, 焦點是否停留在出錯元素上
useTitles : false, 鼠標停留在元素上的時候是否顯示提示信息
onFormValidate : function(result, form) {}, form驗證執行完畢后調用的默認函
數
onElementValidate : function(result, elm) {} 元素驗證執行完畢后調用的默認
函數
在默認情況下驗證庫給表單的onsubmit事件增加了一個監聽器,當驗證失敗的時候阻止這
個事件的進行。如果設置可選項{onSubmit:false},它就不會阻止了。通過這種方式,可
以手動的調用自己的javascript驗證函數。
也可以通過可選項{useTitles:true}來使驗證器使用表單元素的title屬性作為驗證錯誤
的提示信息。
onFormValidate在表單驗證執行之后被調用,獲取兩個參數:驗證結果(true或者false
)和表單的符號。onElementValidate在每個表單元素驗證之后被調用,也獲取兩個參數
:驗證結果(true或者falsh)和表單元素符號。
3. 在需要驗證的元素里加入class引用,這個框架是用class來引入的。
<input type="text" name="lname" id="lname" class="required"> 不可為空。
<input type="password" name="pwd" size="20" class="required validate-alphanum
min-length-4">
不可為空,為數字和字母,不小于4位
<input type="password" name="confirm_password" size="20" class="required
validate-equals-pwd">
密碼校驗,要等于上面pwd的輸入內容。
下面是一個加入驗證元素的可用的類清單:
required 非空域,全部空格也算空
validate-number 一個有效數
validate-digits 只能包含[0-9]任意個數字
validate-alpha 只能是字母[a-zA-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驗證提交的地址,錯誤提示信息
將
由服務器端返回.
validate-selection 用于下拉列表框驗證
validate-chinese 只能是中文(以下為中國的相關驗證)
validate-phone 有效的電話
validate-mobile-phone 有效的手機號
validate-id-number 驗證是否有效的身份證號碼
validate-zip 驗證郵政編碼
4. 還可以手動校驗某一個字段或值符合某種規則。這是一個靜態的方法
var data=$("email").value;
Validation.get("validate-email").test(data) 返回一個boolean型值,這樣你可以判
斷在符合規則之后再拿去后臺比較email是否可用。