JQuery笔记(表单验证) 二

来源:互联网 发布:淘宝空间皇家小地主 编辑:程序博客网 时间:2024/05/22 12:41

 

 

 

 

验证:

 


 

 

<! DOCTYPE  HTML  PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN"

                    "http://www.w3.org/TR/html4/loose.dtd" >

<html>

    <head>
      <!--<style>label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        height:16px;
        width:16px;
        display: block;
        position: absolute;
        top: 4px;
        left: 152px;
    }</style>-->


        <script src="http://code.jquery.com/jquery-latest.js"></script>

        <script type="text/javascript"
            src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>

        <script type="text/javascript"
            src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

        <script type="text/javascript">
           jQuery.validator.setDefaults( {
              debug : true  ,
              success : "valid"
           });;
        </script>
        <script>
       $(document).ready( function () {
                // 1
             $( "#myform" ).validate({
                                             rules : {
                                                        fruit : "required"
                                                     },
                                    errorPlacement : function (error, element) {
                                                            //if ( element.is(":radio") )
                                                            error.appendTo(element.parent());
                                                      }    
                                    });

           
            // 2                       
            $( "#myinput" ).rules(
                                    "add" ,
                                    {
                                          required : true ,
                                         minlength : 2,
                                          messages : {
                                                          required : "Required input" ,
                                                          minlength : jQuery.format( "Please, at least {0} characters are necessary" )
                                                      }
                                    }
                                );
                              
            // 3
            $( ":radio" ).each( function () {
                                          $( this ).rules( "add" , {
                                                                          required    : true ,
                                                                        minlength    : 2,
                                                                           messages    : {
                                                                                           required    : "Required input 必填 " ,
                                                                                        minlength    : jQuery.format( "Please, at least {0} characters are necessary" )
                                                                                       }
                                                                     }
                                                            )
                                              });

      });

</script>



    </head>

    <body>
        <form id="myform">
            <table border="1">
                <tr>
                    <td>
                        <label for="fruit">
                            Please select a fruit
                        </label>
                    </td>
                    <td>
                        <select id="fruit" name="fruit" title="Please select something!">
                            <option value=""></option>
                            <option value="1">
                                Banana
                            </option>
                            <option value="2">
                                Apple
                            </option>
                            <option value="3">
                                Peach
                            </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" id="myinput" />
                    </td>
                    <td>
                        <input type="submit" value="submit!" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="radio3">
                        radio3
                        <input type="radio" name="radio3">
                        radio3
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="radio2">
                        radio2
                        <input type="radio" name="radio2">
                        radio2
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="radio1">
                        radio1
                        <input type="radio" name="radio1">
                        radio1
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>


参考:http://docs.jquery.com/Plugins/Validation

 

rules( )Returns: OptionsReturn the validations rules for the first selected element.rules( "add", rules )Returns: Options
原创粉丝点击