结合上面的,今天写一下validate的使用方法。
validate()验证所选的form。
validate 方法返回一个 Validator 对象。Validator 对象有很多方法可以用来引发校验程序或者改变 form 的内容。
本站介绍了很多 jQuery 幻灯片插件,它们都很优秀,且功能强大,应用在中大型页面上很合适。但如果你的页面很简单,只想要一个简单纯粹的幻灯片效果,这些插件可能略显臃肿。今天我们不用任何插件,写一个简单的响应式幻灯片。
validate()的可选项:
submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。
<span class="pln">$<span class="pun">(<span class="str">"#demoForm"<span class="pun">).<span class="pln">validate<span class="pun">({<span class="pln">
submitHandler<span class="pun">:<span class="kwd">function<span class="pun">(<span class="pln"><span class="pun">)<span class="pln"> <span class="pun">{<span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"> alert('校验全部通过!') <span class="pun">}<span class="pln"><span class="pun">})<br/><br/><span style="font-family: "Microsoft YaHei"; font-size: 16px">ignore:忽略某个元素不校验<br/><span style="font-size: 14px">ignore:'#pass2'//忽略某个元素不校验<br/><span style="font-size: 16px">rules:自定义规则,key:value 的形式,key 是要验证的元素,value 可以是字符串或对象。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span class="pln">$<span class="pun">(<span class="str">"#demoForm"<span class="pun">).<span class="pln">validate<span class="pun">({<span class="pln">
rules<span class="pun">:{<span class="pln">
name<span class="pun">:<span class="str">"required"<span class="pun">,<span class="pln">
email<span class="pun">:{<span class="pln">
required<span class="pun">:<span class="kwd">true<span class="pun">,<span class="pln">
email<span class="pun">:<span class="kwd">true<span class="pln"><span class="pun">}<span class="pln"><span class="pun">}<span class="pln"><span class="pun">})<br/><span style="font-family: "Microsoft YaHei"; font-size: 16px">messages:自定义的提示信息,key:value 的形式,key 是要验证的元素,value 可以是字符串或函数。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span class="pln">$<span class="pun">(<span class="str">"#demoForm"<span class="pun">).<span class="pln">validate<span class="pun">({<span class="pln">
rules<span class="pun">:{<span class="pln">
name<span class="pun">:<span class="str">"required"<span class="pun">,<span class="pln">
email<span class="pun">:{<span class="pln">
required<span class="pun">:<span class="kwd">true<span class="pun">,<span class="pln">
email<span class="pun">:<span class="kwd">true<span class="pln"><span class="pun">}<span class="pln"><span class="pun">},<span class="pln">
messages<span class="pun">:{<span class="pln">
name<span class="pun">:<span class="str">"Name不能为空"<span class="pun">,<span class="pln">
email<span class="pun">:{<span class="pln">
required<span class="pun">:<span class="str">"E-mail不能为空"<span class="pun">,<span class="pln">
email<span class="pun">:<span class="str">"E-mail地址不正确"<span class="pln"><span class="pun">}<span class="pln"><span class="pun">}<span class="pln"><span class="pun">})<br/><span style="font-family: "Microsoft YaHei"; font-size: 16px">OnSubmit:类型 Boolean,默认 true,指定是否提交时验证。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>$("#demoForm").validate({ onsubmit:false })<br/>
<span class="pln"><span class="pun"><span class="str"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="str"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="kwd"><span class="pun"><span class="pln"><span class="pun"><span class="kwd"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span style="font-family: "Microsoft YaHei"; font-size: 16px">onfocusout:类型 Boolean,默认 true,指定是否在获取焦点时验证。</span><br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<br/>
$("#demoForm").validate({ onfocusout:false })<span class="pln"><span class="pun"><span class="str"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="kwd"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span style="font-family: "Microsoft YaHei"; font-size: 16px"><span style="font-size: 14px"><span style="font-size: 16px"><br/>onkeyup:类型 Boolean,默认 true,指定是否在敲击键盘时验证。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
$("#demoForm").validate({ onkeyup:false })<span class="pln"><span class="pun"><span class="str"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="kwd"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span style="font-family: "Microsoft YaHei"; font-size: 16px"><span style="font-size: 14px"><span style="font-size: 16px"><br/>onclick:类型 Boolean,默认 true,指定是否在鼠标点击时验证(一般验证 checkbox、radiobox)。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
$("#demoForm")).validate({ onclick:false })<span class="pln"><span class="pun"><span class="str"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="kwd"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span style="font-family: "Microsoft YaHei"; font-size: 16px"><span style="font-size: 14px"><span style="font-size: 16px"><br/>focusInvalid:类型 Boolean,默认 true。提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
$("#demoForm").validate({ focusInvalid:false })<span class="pln"><span class="pun"><span class="str"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="kwd"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span style="font-family: "Microsoft YaHei"; font-size: 16px"><span style="font-size: 14px"><span style="font-size: 16px"><br/>focusCleanup:类型 Boolean,默认 false。当未通过验证的元素获得焦点时,移除错误提示(避免和 focusInvalid 一起使用)<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
$("#demoForm").validate({ focusCleanup:true })<span class="pln"><span class="pun"><span class="str"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="kwd"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span style="font-family: "Microsoft YaHei"; font-size: 16px"><span style="font-size: 14px"><span style="font-size: 16px"><br/>errorClass:类型 String,默认 "error"。指定错误提示的 css 类名,可以自定义错误提示的样式。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
$("#demoForm").validate({ errorClass:"invalid" })<span class="pln"><span class="pun"><span class="str"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="kwd"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span style="font-family: "Microsoft YaHei"; font-size: 16px"><span style="font-size: 14px"><span style="font-size: 16px"><br/>errorElement:类型 String,默认 "label"。指定使用什么标签标记错误。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
$(".selector").validate
errorElement:"em"})<span class="pln"><span class="pun"><span class="str"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="kwd"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span style="font-family: "Microsoft YaHei"; font-size: 16px"><span style="font-size: 14px"><span style="font-size: 16px"><br/>highlight:可以给未通过验证的元素加效果、闪烁等。<br/></span></span><br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>









