jQuery validate和form插件配套使用
参考
官网http://jqueryvalidation.org/documentation/
博客http://www.cnblogs.com/buzzlight/archive/2010/06/30/1768364.html(共5篇)
remote的使用（若根据官网总是不行）http://www.jquery4u.com/ajax/jquery-ajax-validation-remote-rule/
validate 与 form插件的结合使用http://www.cnblogs.com/qqloving/archive/2011/05/01/2034011.html
<html> <head> <meta charset="utf8"> </meta> </head> <body> <script src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script> <form id="myForm2" action="comment.php" method="post"> <div> <input type="hidden" name="Hidden" value="hiddenValue"> <table> <tbody> <tr> <td><label for="username">Username</label></td> <td> <input id="username" name="username" /> </td> <!-- 这里设置的校验信息显示的地方在下一个td中，可以自行修改 --> <td></td> </tr> <tr> <td><label for="Psw">Password:</label></td><td><!-- 这里的name的值要和下面rules的配置规则时用的名字对应 --><!-- 这里的id值并不影响对Psw这个输入框的检测--><!-- <input id="Psw1" name="Psw" class="Psw" type="password" value='12355'> ok!--> <input id="Psw" name="Psw" type="password" value='12355'> <!-- 上方的id值是因为下面有个rules用到了id选择器 来定位到这个元素 如果选择器中是.Psw 那么这里就需要指定class="Psw" --></td> </tr> <tr> <td><label for="PswA">Password Again</label></td><td> <input id="PswA" name="PswA" type="password" value='12355'> </td> </tr> <tr> <td><label>Email</label></td> <td> <input name="email" value="" id="email"/> </td> </tr> <tr> <td>Multiple:</td><td> <select id="Mul" name="Multiple" multiple="multiple"> <optgroup label="Group 1"> <option value="one" selected="selected">One</option> <option value="two">Two</option> <option value="three">Three</option> </optgroup> <optgroup label="Group 2"> <option value="four">Four</option> <option value="five">Five</option> <option value="six">Six</option> </optgroup> </select></td> </tr> <tr> <td>Single:</td><td> <select name="Single" > <!-- <option value="one" selected="selected">One</option> --> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> </select></td> </tr> <tr> <td>Single2:</td><td> <select name="Single2"> <optgroup label="Group 1"> <option value="A" selected="selected">A</option> <option value="B">B</option> <option value="C">C</option> </optgroup> <optgroup label="Group 2"> <option value="D">D</option> <option value="E">E</option> <option value="F">F</option> </optgroup> </select></td> </tr> <tr> <td><label for="language">check</label></td><td> <input type="checkbox" name="language" value="cn" /> 汉语 <input type="checkbox" name="language" value="en" /> 英语 <input type="checkbox" name="language" value="jp" /> 日语 <input type="checkbox" name="language" value="ge" /> 德语 </td> <!-- 对于多个input 一定要指定提示信息的位置 否则提示信息就会放在第一个input之后 --> <td><span class="language"></span></td> </tr> <tr> <td><label for="lang">check for php</label></td><td> <input type="checkbox" name="lang[]" value="cn" class="ignore"/> 汉语 <input type="checkbox" name="lang[]" value="en" class="ignore"/> 英语 <input type="checkbox" name="lang[]" value="jp" class="ignore"/> 日语 <input type="checkbox" name="lang[]" value="ge" class="ignore"/> 德语 </td> <td> <input type="button" id="check" value="check"/> <span id="lang"></span></td> </tr> <tr> <td>Radio:</td><td> <input type="radio" name="rad" value="radio1"/> <input type="radio" name="rad" value="radio2" /> <input type="radio" name="rad" value="radio3" /> </td> <td><span class="rad"></span></td> </tr> <tr> <td>Text:</td><td> <textarea id="Txt" name="Text" rows="2" cols="20">This is Form2</textarea></td> </tr> </tbody> </table> <input type="reset" name="resetButton " value="Reset"> <input type="submit" name="submitButton" value="Submit1" id="#submit"> </div> </form> <div id='output1'> </div> <div id="output2"> </div> <script type="text/javascript"> $().ready(function() { var options = { target : '#output2', // target element(s) to be updated with server response beforeSubmit : checkFields, // pre-submit callback success : showResponse // post-submit callback }; $("#myForm2").validate({ submitHandler:function(form) { $("#myForm2").ajaxSubmit(options); }, rules : { username : "required", /*仅有required没有其他规则 且没有输入值的话 只会在提交的时候才给出输入值的提示*/ Psw : { required : true, minlength : 5 }, PswA : { required : true, minlength : 5, equalTo : "#Psw" }, email : { required : true, email : true, remote : { url:"check-email.php", type:'get', data:{ email: function(){ return $('input[name="email"]').val(); } }, dataType:'json' } }, Multiple : { required : true }, Single : { required : true }, Single2 : { required : true }, language : { required : true, minlength : 2 /*至少选择2项*/ }, rad : { required : true } }, messages : { username : "请输入姓名", email : { required : "请输入Email地址", email : "请输入正确的email地址", remote : "换一个email" }, Psw : { required : "请输入密码", minlength : jQuery.format("密码不能小于{0}个字 符") }, confirm_password : { required : "请输入确认密码", minlength : "确认密码不能小于5个字符", equalTo : "两次输入密码不一致不一致" } }, errorPlacement : function(error, element) { if (element.attr("name") == "language") { error.insertAfter(".language"); } else if(element.attr("name")=="rad"){ error.insertAfter(".rad"); }else { error.insertAfter(element); } }, focusCleanup : true, /*得到焦点时清除错误信息*/ ignore : ".ignore" /*对于这样的元素不检测*/ }); }); function checkFields(formData, jqForm, options) { var len = $("input[name='lang[]']:checked").length; if (len < 2) { //alert('AT LEAST TWO'); $("#lang").text("至少选2个"); return false; } } function showResponse(responseText, statusText, xhr, $form) { $("#output1").text('showResponse status: ' + statusText +'\n' ); $("#output1").append(responseText); } </script> </body> </html>
comment.php
<?php $name=$_REQUEST['username']; $psw=$_REQUEST['Psw']; $muti=$_REQUEST['Multiple']; $sin=$_REQUEST['Single']; $sin2=$_REQUEST['Single2']; $che=$_REQUEST['lang']; $radio=$_REQUEST['rad']; $checkStr=''; foreach ($che as $key => $value) { $checkStr=$checkStr.$value.' '; } echo 'name '.$name.'</br>'; echo 'psw '.' '.$spw.'</br>'; echo 'muti '.$muti.'</br>'; echo 'single '.$sin.'</br> '; echo 'single 2 '.$sin2.'</br>'; echo 'radio '.$radio.'</br>'; echo 'check '.$checkStr ; ?>
check-email.php
<?php $email=$_REQUEST['email']; $valid=""; if($email=="111@qq.com"){ $valid= "false"; }else { $valid="true"; } echo $valid; ?>
