Jquery学习札记五 通过validate插件来验证表单
Jquery学习笔记五 通过validate插件来验证表单
一般我们在做表单验证的时候,更多的是通过js来实现,有的时候表单的字段多了,可能会很麻烦,用Jquery的validate插件,可以很方便的做到表单的验证,这款插件提供了包括判断是否为空,格式是否正确等大概19种验证规则,现在就通过validate插件来验证一下示例表单。
首先准备html页面,代码如下,在引入jquery的同时,还要引入两个js文件,就是validate的插件和国际化的插件,代码如下
初始化的表单如图所示
现在我要加验证代码了,根据jquery提供的插件,我可以这样来写验证脚本,
这样写完后,可以出现验证提示,但是提示语言是英文的,这个时候我们就要用到国际化的插件了,可以定义自己想定义的提示方式
需要加上这么一段代码
ok,到这一步,就可以了,如果你输入错误的话,会给出带中文的提示。如图
如果输入都正确,则有以下提示
利用这款插件做验证,非常方便。
一般我们在做表单验证的时候,更多的是通过js来实现,有的时候表单的字段多了,可能会很麻烦,用Jquery的validate插件,可以很方便的做到表单的验证,这款插件提供了包括判断是否为空,格式是否正确等大概19种验证规则,现在就通过validate插件来验证一下示例表单。
首先准备html页面,代码如下,在引入jquery的同时,还要引入两个js文件,就是validate的插件和国际化的插件,代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.3.1.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <script type="text/javascript" src="js/jquery.validate.messages_cn.js"></script> <style type="text/css"> * { font-family: Verdana; font-size: 96%; } label { width: 10em; float: left; } label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } p { clear: both; } .submit { margin-left: 12em; } em { font-weight: bold; padding-right: 1em; vertical-align: top; } em.error { background:url("images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; } em.success { background:url("images/checked.gif") no-repeat 0px 0px; padding-left: 16px; } </style> <title>Jquery Plugin Test</title> </head> <body> <form class="cmxform" id="commentForm" method="get" action="#"> <fieldset> <legend>表单验证</legend> <p> <label for="cusername">姓名</label><em>*</em> <input id="cusername" name="username" size="25" /> </p> <p> <label for="cemail">电子邮件</label><em>*</em> <input id="cemail" name="email" size="25" /> </p> <p> <label for="curl">网址</label><em></em> <input id="curl" name="url" size="25" value="" /> </p> <p> <label for="ccomment">你的评论</label><em>*</em> <textarea id="ccomment" name="comment" cols="22"></textarea> </p> <p> <input class="submit" type="submit" value="提交"/> </p> </fieldset> </form> </body> </html>
初始化的表单如图所示
现在我要加验证代码了,根据jquery提供的插件,我可以这样来写验证脚本,
$(function() { $("#commentForm").validate({ rules: { username: { required: true, minlength: 2 }, email: { required: true, email: true }, url:"url", comment:"required" } errorElement: "em", success: function(label) { label.text(" ") .addClass("success"); } }); })
这样写完后,可以出现验证提示,但是提示语言是英文的,这个时候我们就要用到国际化的插件了,可以定义自己想定义的提示方式
需要加上这么一段代码
messages: { username: { required: '请输入姓名', minlength: '请至少输入两个字符' }, email: { required: '请输入电子邮件', email: '请检查电子邮件的格式' }, url: '请检查网址的格式', comment: '请输入您的评论' },
ok,到这一步,就可以了,如果你输入错误的话,会给出带中文的提示。如图
如果输入都正确,则有以下提示
利用这款插件做验证,非常方便。