06-解决方案

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

11.1.2　解决方案

改善这种情况的方法之一是添加客户端验证。基本思路是尽快给用户反馈，避免他们厌烦。不应该提交无效的表单，这样就能避免重复填写密码或者验证码的情况。

在字段中填写john.doe@gmail，com这样的无效电子邮件之后，高亮显示的错误也是有意义的。在用户有机会正确填写字段之前高亮显示错误字段没有任何帮助：在需要至少两个字符的字段上，用户输入第一个字符之后在字段上显示“输入太短”完全没有作用。

validation插件（http://jquery-cookbook.com/go/plugin-validation）很好地满足了这些需求。

要开始使用这个插件，首先下载，解压文件，将 jquery.validate.js 复制到项目中。下面的例子展示了一个评论表单，表单上有姓名、电子邮件、URL和实际评论字段。调用插件方法 validate() 建立表单的验证。验证规则用类和属性以内联方式指定：

<!DOCTYPE html>
<html>
<head>
　 <script src="assets/jquery-latest.js"></script>
　 <script src="assets/jquery.validate.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; }
　　 div { clear: both; }
　　 input, textarea { width: 15em; }
　　 .submit { margin-left: 10em; }
　 </style>
　 <script type="text/javascript">
　　 jQuery(document).ready(function($){
　　　 $("#commentForm").validate();
　　 });
　 </script>
</head>
<body>
　 <form id="commentForm" method="get" action="">
　　　<fieldset>
　　　　 <legend>A simple comment form with submit validation and default messages</legend>
　　　　 <div>
　　　　　　<label for="cname">Name</label>
　　　　　　<input id="cname" name="name" class="required" minlength="2" />
　　　　 </div>
　　　　 <div>
　　　　　　<label for="cemail">E-Mail</label>
　　　　　　<input id="cemail" name="email" class="required email" />
　　　　 </div>
　　　　 <div>
　　　　　　<label for="curl">URL (optional)</label>
　　　　　　<input id="curl" name="url" class="url" value="" />
　　　　 </div>
　　　　 <div>
　　　　　　<label for="ccomment">Your comment</label>
　　　　　　<textarea id="ccomment" name="comment" class="required"></textarea>
　　　　 </div>
　　　　 <div>
　　　　　　<input class="submit" type="submit" value="Submit"/>
　　　　 </div>
　　　</fieldset>
　 </form>
</body>
</html>

有 required 类的任何字段都必须接受检查，看看有没有内容。这个例子中的其他方法包括：

email

检查字段中是否包含有效的电子邮件地址。

url

检查字段是否包含有效的URL。

minlength

检查字段是否至少有x个字符；这里x通过属性 minlength="2" 指定。

Previous 上一篇本节目录 Next 下一篇

06-解决方案

11.1.2 解决方案

11.1.2　解决方案