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;
?>

 

 

 

posted @ 2013-08-10 14:31  cart55free99  阅读(438)  评论(0编辑  收藏  举报