validate forms 验证表单 :在你以前从来没有这样验证过;
jquery 让我们更容易的鞋自己的验证插件吗? 是的, 但是 也有一些经常出错需要注意的地方: 你需要一个包含有验证方法的标准的类库
你需要在DOM 中适当的显示和隐藏错误信息, 你需要做不仅仅是提交表单验证那么简单, 也有可能是 keyup 和 blur
你也许需要不同的方式定义验证规则, 在不同项目的服务器环境中,这些你不用重新发明额。
有许多验证插件已经存在,不是基于jquery的 在jquery能够使用以前,现在有一些基于jquery的方法。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/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; } p { clear: both; } .submit { margin-left: 12em; } em { font-weight: bold; padding-right: 1em; vertical-align: top; } </style> <script> $(document).ready(function(){ $("#commentForm").validate(); }); </script> </head> <body> <form class="cmxform" id="commentForm" method="get" action=""> <fieldset> <legend>A simple comment form with submit validation and default messages</legend> <p> <label for="cname">Name</label> <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" /> </p> <p> <label for="cemail">E-Mail</label> <em>*</em><input id="cemail" name="email" size="25" class="required email" /> </p> <p> <label for="curl">URL</label> <em> </em><input id="curl" name="url" size="25" class="url" value="" /> </p> <p> <label for="ccomment">Your comment</label> <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form> </body> </html>
jquery导入验证表单插件:
这仅仅是一种定义规则,你也不一定都相应默认的信息,但是他们是非常容易进行一个表单验证。
我们从这个例子中可以看到:
1:当试着提交一个无效的表单时,这第一个无效的元素是被触发,允许使用者改正(correct)这个输入域,如果另外一个无效的输入但不是第一个了,被触发在提交以前,这个输入域也会触发,allowing the user start at the bottom, if he prefers that ?
2:在输入域是被标志为无效之前,
Before a field is marked as invalid, the validation is lazy: Before submitting the form for the first time, the user can tab through fields without getting annoying messages - he won't get bugged before he had the chance to actually enter a correct value
3: 一旦一个输入与是被标志为无效,验证错误立刻会显示出,只要使用者输入合适的值,这个错误信息会被移除。
4:If the user enters something in a non-marked field, and tabs/clicks away from it (blur the field), it is validated - obviously the user had the intention to enter something, but failed to enter the correct value 觉得这段是废话,和第三句差不多;
1:method:一个验证方法实现了一个验证逻辑要素,像email方法检查一个email的输入值的正确的格式,一系列方法已经提供,你也很容易写这些方法。。。
2:rules :一个验证规则是一个验证方法的核心要素, 像 验证输入 email的方法 "required" 和 "email"
下面介绍插件的方法:
plugin methods:
validate(options) Returns: validator 作用: 验证选择的表单:
这个方法是下列事件处理的函数: submit ,focus ,keyup ,blur and click 这些在整个表单或单个个体的元素中触发验证,每一个都是有缺陷的,see the onxxx options (onsubmit, onfocusout, onkeyup, onclick) 当提交一个无效的表单的时候,无效的元素都会触发。
使用 debug 选项 是容易的建立验证规则,它总是阻止默认的提交,即使当脚本出现错误。
: