原生JS的表單驗證

今天完成了一個表單驗證的功能，原生JS寫的。同樣掛在朋友的空間里。地址：http://www.webzhishi.com/javascript-form/

說明一下：

三個接口

　　1）添加驗證項

　　

var a = validator({
		"form": "validator-form",
		ajaxSubmit:true,
		beforSubmit:function(){
			//alert("表單提交前執行的函數");
		},
		afterSubmit:function(){
			alert("ajax提交后返回的數據是："+this.responseText);
		}
	}).add({
	    "target": "username",
		"rule_type": "username",
		'action':'2.php',
		'tips':'說點什么好呢'
	})

　可以鏈寫，也可以單獨寫

a.add({
		"target": "password",
		"rule_type": "password"
	})

　　2)刪除驗證項 username是表單元素的ID

a.remove('username');

　　3)重置整個表單

a.reset();

 

如果一個頁面有多個表單，只需要用不同的變量引用即可

var a = validator({
		"form": "validator-form",
		ajaxSubmit:true,
		beforSubmit:function(){
			//alert("表單提交前執行的函數");
		},
		afterSubmit:function(){
			alert("ajax提交后返回的數據是："+this.responseText);
		}
	});

var b = validator({
		"form": "validator-form2",
		ajaxSubmit:true,
		beforSubmit:function(){
			//alert("表單提交前執行的函數");
		},
		afterSubmit:function(){
			alert("ajax提交后返回的數據是："+this.responseText);
		}
	})

　　

a.支持自定義提示信息

.add({
	    "target": "username",
		"rule_type": "username",
		'tips':'說點什么好呢',
                'error':'哎喲，你咋就填錯了呢，親，您的智商是0么？'
	})

 b.支持自定義規則,設置其rule即可,但這個時候就不要用rule_type了

.add({
		"target": "password",
		"rule": /^\d{6,11}$/
	})

c.支持多重驗證規則,設置rule_type，和JS里的條件判斷一樣

.add({
		"target": "age",
		"rule_type": "(number&&range)||empty",
		"error":'雖然這玩意兒不是必填項，但既然你填了，就把它填對吧。'
	})

d.支持ajax驗證，設置action(提交地址)即可

add({
	    "target": "username",
		"rule_type": "username",
		'action':'2.php',
		'tips':'說點什么好呢'
	})

e.支持ajax表單提交，只需設置ajaxSubmit為true即可，提交方式是form的methoed屬性，提交地址是form的action屬性值，表單提前交可執行beforSubmit，ajax提交完成后執行afterSubmit回調

validator({
		"form": "validator-form",
		ajaxSubmit:true,
		beforSubmit:function(){
			//alert("表單提交前執行的函數");
		},
		afterSubmit:function(){
			alert("ajax提交后返回的數據是："+this.responseText);
		}
	})

f.支持驗證兩個表單元素的值是否相同，一般用在重復密碼上

.add({
	"target": "confirm-password",  
	"rule_type": "password",
    "sameTo": "password",               //驗證兩個表單元素的值是否相同，一般用在重復密碼上
    'error':'你填寫的密碼不正確或者和原密碼不同'
})

g.如果不需要提示，加個no_Tip就可以了

.add({
	"target": "confirm-password",  
	"rule_type": "password",
        "no_tip":true
})

　　

　

下面舉個完整的例 子：

/**
 * @author Administrator
 */
var a = validator({
	"form": "validator-form",           //表單ID
	ajaxSubmit:true,                    //以ajax的形式提交
	beforSubmit:function(){             //提交前執行
		//alert("表單提交前執行的函數");
	},
	afterSubmit:function(){             //提交后執行，this指向的是ajax實例
		alert("ajax提交后返回的數據是："+this.responseText);
	}
}).add({
    "target": "username",              //需要驗證的表單元素的ID
	"rule_type": "(username&&nameLen)||empty",   //驗證規則，可組合任意個規則，和原生JS的一樣        
	'action':'2.php',                  //ajax驗證，一般用在判斷用戶名的唯一性，后台需返回一個對象{isPass:true||false};
	'tips':'說點什么好呢'                  //自定義提示信息
	'error':'哎喲，你咋就填錯了呢，親，您的智商是0么？' //自定義錯誤提示信息
}).add({
	"target": "password",
	"rule": /^\d{6,11}$/                //自定義驗證規則
}).add({
	"target": "confirm-password",  
	"rule_type": "password",
    "sameTo": "password",               //驗證兩個表單元素的值是否相同，一般用在重復密碼上
    'error':'你填寫的密碼不正確或者和原密碼不同'
});

//添加一個驗證項
a.add({
	"target": "age",
	"rule_type": "number||empty",
	"error":'雖然這玩意兒不是必填項，但既然你填了，就把它填對吧。',
         beforeFocus：function(){},//驗證元素獲得焦點時執行,
         beforeBlur:function(){},//驗證元素失去焦點時執行,
         onkeypress:function(){},//驗證元素正在輸入的時候執行,
         afterChange:function(){}//select元素的值改變時執行，注意，此函數僅限select

});

//刪除一個驗證項
a.remove('username');

//重置表單
a.reset();