表单验证一直是一个大问题,但是有了jquery,有了form validation plugins,一切就变得简单了。
点此查看官方说明文档
来看个简单的例子:http://www.live-my-life-with-yuyi.com/lab/jquery/validation/
下载 http://formvalidator.vicp.cc/download.html
实现代码:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns= "http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
-
<title>Test for jQuery validate ( ) plugin</title>
-
<link rel= "stylesheet" type= "text/css" media= "screen" href= "css/screen.css" />
-
<script src= "js/jquery.js" type= "text/javascript"></script>
-
<script src= "js/cmxforms.js" type= "text/javascript"></script>
-
<script src= "js/jquery.metadata.js" type= "text/javascript"></script>
-
<script src= "js/jquery.validate.min.js" type= "text/javascript"></script>
-
<script type= "text/javascript">
-
$. meta. setType ( "attr", "validate" );
-
$. validator. setDefaults ( {
-
submitHandler: function ( ) { alert ( "submitted!" ); }
-
} );
-
$ ( ). ready ( function ( ) {
-
// validate the comment form when it is submitted
-
$ ( "#commentForm" ). validate ( {
-
messages: {
-
cname: "请输入用户名",
-
cemail: {
-
required: "电子邮件不能为空",
-
email: "电子邮件格式不正确"
-
},
-
curl: "URL格式不对",
-
ccomment: "留言不能为空"
-
}
-
} );
-
} );
-
</script>
先载入4个js文件,放心这四个文件都很小
-
$. meta. setType ( "attr", "validate" );
这句话的意思是设置一个标签,然后在这个标签里,定义相关的属性,比如required,minLength等等
-
$. validator. setDefaults ( {
-
submitHandler: function ( ) { alert ( "submitted!" ); }
-
} );
这个函数会在所有验证都通过时触发,提交表单。
-
$ ( "#commentForm" ). validate ( {
-
messages: {
-
cname: "请输入用户名",
-
cemail: {
-
required: "电子邮件不能为空",
-
email: "电子邮件格式不正确"
-
},
-
curl: "URL格式不对",
-
ccomment: "留言不能为空"
-
}
-
} );
这个是自定义错误信息,属性对应的是表单项的name,值对应的是当验证不通过时的错误信息。就这么简单,验证部分就做完了。
再来看看表单部分
-
<form class="cmxform" id="commentForm" method="get" action="">
-
<legend>A simple comment form with submit validation and default messages </legend>
-
<label for="cname">Name (required, at least 2 characters) </label>
-
<input id="cname" name="cname" class="some other styles " validate = "required:true,minLength:2" />
-
<label for="cemail">E-Mail (required) </label>
-
<input id="cemail" name="cemail" validate = "required:true,email:true" />
-
</p>
-
<label for="curl">URL (optional) </label>
-
<input id="curl" name="curl" validate = "url:true" value="" />
-
</p>
-
<label for="ccomment">Your comment (required) </label>
-
<textarea id="ccomment" name="ccomment" validate = "required:true"> </textarea>
-
</p>
-
<input class="submit" type="submit" value="Submit"/>
-
</p>
-
<label for="spam_email">
-
<input type="checkbox" id="spam_email" value="email" name="spam" validate="required:true, minLength:2" />
-
Spam via E-Mail
-
</label>
-
<label for="spam_phone">
-
<input type="checkbox" id="spam_phone" value="phone" name="spam" />
-
Spam via Phone
-
</label>
-
<label for="spam_mail">
-
<input type="checkbox" id="spam_mail" value="mail" name="spam" />
-
Spam via Mail
-
</label>
-
<label for="spam" class="error">请至少选择两个选项 </label>
-
</p>
-
</fieldset>
-
</form>
比正常的表单多出来的一项就是validate,这个在之前的js里已经设置过了,这里面就定义了该表单项的验证信息,如是否是必填,最短长度,是否为email等等。
这句话看起来比较有意思
-
<label for="spam" class="error">请至少选择两个选项 </label>
当class的值为error时,默认是被隐藏的,只有当提交表单进行验证并出错时才会显示,同时这个for也是必不可少的,for的内容对应的是要监视的表单项。
其实最终促成我写这篇文章的原因是,从官方下载的插件在ie6下无效,经过近3个小时的追查,终于发现在jquery.validate.js里,url验证那块有乱码,结果直接导致ie6不能运行(在FF和IE7下正常)。于是我修改了一下,终于可以通过IE6了。