JQ-- form validation plugin (validation)

1, using the validation plugin must first download the appropriate file:

Open the folder dist:

Open the localization file in dist folder (control characters):

Open the file, the following key elements:

1      required: "This is a required field",
 2      Remote: "Please fix this field",
 3      Email: "Please enter a valid email address",
 4      url: "Please enter a valid URL",
 5      DATE: "Please enter a valid date ",
 . 6      dateISO:" Please enter a valid date (the MM-DD-YYYY) ",
 . 7      Number:" Please enter a valid number ",
 . 8      digits:" enter numbers only ",
 . 9      CreditCard:" Please enter a valid credit card number ",
 10      equalTo:" your input is not the same ",
 11      Extension:" Please enter a valid suffix ",
 12      maxlength: $ .validator.format (" enter up to {0} characters "),
 13 is      minLength: $ .validator.format ( "a minimum of input characters {0}"),
14      rangelength: $ .validator.format ( "Please enter the length between {0} to {1} character string"),
 15     range: $ .validator.format ( "Please enter range in value between {0} to {1}"),
 16      max: ( "Please enter a value not larger than {0}") $ .validator.format,
 . 17      min: $ .validator.format ( "Please enter a value less than {0}")

2, simple use of validation (validate the user name and password):

(1) core code:

<script>
            $(function(){
                $("#checkForm").validate({
                    rules:{
                        username:{
                            required:true,
                            minlength:6
                        },
                        password:{
                            required:true,
                            digits:true,
                            minlength:6
                        }
                    },
                    messages: { 
                        username: { 
                            required: " Username can not be empty! " , 
                            minLength: " Username not less than six! " 
                        }, 
                        password: { 
                            required: " Password can not be empty! " , 
                            digits: " The password must be ! digital " , 
                            minLength: " The password must be less than six! " 
                        } 
                    } 
                });
            });
         </script>

Must first obtain a form of ID to be verified, then define the attribute values of the user name and password to complete the form check. Where the message can be modified message (covering has been defined).

(2) the complete code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>validate</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
        <script type="text/javascript" src="../js/messages_zh.js" ></script>
        <script>
            $(function(){
                $("#checkForm").validate({
                    rules:{
                        username:{
                            required:true,
                            minlength:6
                        },
                        password:{
                            required:true,
                            digits:true,
                            minlength:6
                        } 
                    }, 
                    Messages: { 
                        username: { 
                            required: " Username can not be empty! " , 
                            MinLength: " Username not less than six! " 
                        }, 
                        Password: { 
                            required: " ! Password can not be empty " , 
                            digits: " The password must be a number! " , 
                            minLength: " The password must be less than six! " 
                        } 
                    }
                });
            });
        </script>
        
    </head>
    <body>
        <form action="#" id="checkForm">
            用户名：<input type="text" name="username" /><br />
            密码：<input type="password" name="password"/><br />
            <input type="submit"/>
        </form>
    </body>
</html>

(3) results show:

Input does not meet the requirements of the user name and password:

Enter meet the requirements of the user name and password:

Use plug-ins to reduce the amount of code complexity and development. Can compare with the form validation JS ( https://www.cnblogs.com/zhai1997/p/12217085.html ), JS developed inside the check function must be written in their own hand, development more difficult, but only JQ development should set the corresponding property value, you do not need to manually write verification function.

JQ-- form validation plugin (validation)

Guess you like