原生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();