改进版简单的 jQuery 前台评论表单验证

昨天说过要在家里等考试,旅游也去不了,而今天我决定要去旅游,估计周末也不会考试滴~

与之前 简单的 jQuery 前台评论表单验证 不同在于这个代码是当文本框失去焦点时验证,也就是填完一个框到下一个框时就验证,也是很轻量的。

jQuery(function(){
	$('#commentform :input').blur(function(){ //当表单里的输入框失去焦点时
		if($(this).is('#author')){
			if(this.value==""){
				//这里添加了一个 CSS 类 onError ,需要在 CSS 里面添加,我只设置了背景颜色
				//其最大作用还是辅助判断是否发生错误,有错误则存在 onError 类
				$(this).addClass("onError"); 
			}else{
				$(this).removeClass("onError");
			}
		}
		if($(this).is('#email')){
			if(this.value=="" || !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test(this.value)){
				$(this).addClass("onError");
			}else{
				$(this).removeClass("onError");
			}
		}
		if($(this).is('#url')){
			if(this.value!="" && !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test(this.value)){
				$(this).addClass("onError");
			}else{
				$(this).removeClass("onError");
			}
		}
		if($(this).is('#comment:first')){
			if(this.value==""){
				$(this).addClass("onError");
			}else{
				$(this).removeClass("onError");
			}
		}
	});
	$('#submit').click(function(){
		$('#commentform :input').trigger('blur'); 		//提交时再全局验证
		var numError=$('#commentform .onError').length; //判断 onError 类是否存在
		if(numError){ 									//存在则禁止提交
			return false;
		}
	});
});