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