The use of JQuery validation plugin validation

Summary: Download: Download the validation plugin address: jqueryvalidation.org/; it should be noted here that the validation validation plugin depends on JQuery, so it should be placed in the project together with JQuery.

Download:

Download the validation plugin address: jqueryvalidation.org/; it should be noted here that the validation validation plugin is dependent on JQuery, so it should be placed in the project together with JQuery.

Use:

Simple configuration:

It is very simple to use. First of all, if we use the environment in Chinese, we can customize the Chinese prompt information (or save it as a file): the following code:

/**
* Created by Administrator on 2017/6/14.
*/
(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else {
        factory( jQuery );
    }
}(function( $ ) {

    /*
     * Translated default messages for the jQuery validation plugin.
     * Locale: ZH (Chinese, Chinese(Zhōngwén), Chinese, Chinese)
     */
    $.extend($.validator.messages, {
        required: "This is a required field",
        remote : "Please correct this field",
        email: "Please enter a valid email address",
        url: "Please enter a valid URL",
        date: "Please enter a valid date",
        dateISO: "Please enter a valid date (YYYY -MM-DD)",
        number: "Please enter a valid number",
        digits: "Enter only numbers",
        creditcard: "Please enter a valid credit card number",
        equalTo: "Your input is not the same",
        extension: " Please enter a valid suffix",
        maxlength: $.validator.format("You can enter up to {0} characters"),
        minlength: $.validator.format("At least {0} characters are required"),
        rangelength: $.validator.format("Please enter a string of length between {0} and {1}"),
        range: $.validator.format("Please enter a range between {0} and {1} "),
        max: $.validator.format("Please enter a value not greater than {0}"),
        min: $.validator.format("Please enter a value not less than {0}")
    });

} ));

Getting started: The

code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>validate</title>
</head>
<body>
<form id="formID" action="">
    <legend>User Registration</legend>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
   <p>
       <label for="password">密码：</label>
       <input type="password" name="password" id="password">
   </p>
   <p>
       <input type="submit" value="注册">
   </p>
</form>
</body>
<script src="jquery.js" type="application/javascript"></script>
<script src="validate.js" type="application/javascript"></script>
<script src="validate_cn.js" type="application/javascript"></script>
<script>
    $(function () {
        $('#formID').validate({
            debug:true,
            rules:{
                username:{
                    required:true,
                    minlength:2,
                    maxlength:10
                },
                password:{
                    required:true,
                    minlength:2,
                    maxlength:12
                }
            }
        })
    })
</script>
</html>

Display effect:

Custom validation rules:

We need to use $. validator.addMethod completes. A simple example is as follows:
http://click.aliyun.com/m/23434/

The use of JQuery validation plugin validation

Guess you like