WordPress 当然也有表单的验证,不过大家都知道用户体验一点都不好,页面发生跳转,有时还会把表单清空了,而前台表单认证显得非常有必要了。以下是我写的通过改变文本框背景颜色提示用户输入内容,WordPress 只要把以下代码放到 js 文件里就能工作了。验证由点击提交按钮触发,工作原理看注释。
//表单验证
$(function(){
$('#submit').click(function(){
var $author=$('#author').val(); //名称
var $email=$('#email').val(); //邮箱
var $url=$('#url').val(); //网址
var $textarea=$('textarea:first').val(); //评论
var $errorNo=0;
if($author==""){
$('#author').css("background","#F9A4A4");
$errorNo+=1;
}else{
$('#author').css("background","#FFF");
}
if($email==""){
$('#email').css("background","#F9A4A4");
$errorNo+=1;
}else if(!/^(?:[a-zd]+[_-+.]?)*[a-zd]+@(?:([a-zd]+-?)*[a-zd]+.)+([a-z]{2,})+$/i.test($email)){
$('#email').css("background","#F9A4A4");
$errorNo+=1;
}else{
$('#email').css("background","#FFF");
}
if($url!="" && !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test($url)){
$('#url').css("background","#F9A4A4");
$errorNo+=1;
}else{
$('#url').css("background","#FFF");
}
if($textarea==""){
$('textarea:first').css("background","#F9A4A4");
$errorNo+=1;
}else{
$('textarea:first').css("background","#FFF");
}
if($errorNo>0){
return false;
}
});
});
这样一个非常简单的表单验证就出来了~效果就是小博现在这样,欢迎指正改进~
PS:8月14日修正,更严密的正则表达式。
PS2:2013年10月18日修正,真是弄巧反拙,简单复杂化……现已修正。