zoukankan      html  css  js  c++  java
  • 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 +'
    ' );
                    $("#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;
    ?>
  • 相关阅读:
    [Cisco答疑]思科产品常见问题问答大汇总
    英语名人名言
    [配置实例]三层交换机组播配置实例
    利用VLAN技术组建三层线速校园网
    神州数码交换机配置基本命令
    SQL命令大全中英文对照
    SQL通用防注入系统3.1 最终纪念版
    带关闭按钮的浮动窗口
    Document方法对比
    HTML元素参考手册
  • 原文地址:https://www.cnblogs.com/cart55free99/p/3250050.html
Copyright © 2011-2022 走看看