昨天说过要在家里等考试,旅游也去不了,而今天我决定要去旅游,估计周末也不会考试滴~
与之前 简单的 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; } }); });