jQuery.validator插件使用

插件下载地址:https://github.com/jquery-validation/jquery-validation/tree/1.17.0

django引入插件:

html代码片段

                        

                            
                            

                                Name
                                

                                    
                                
                            

                            

                                password
                                

                                    
                                
                            

                            

                                confirm password
                                

                                    
                                
                            

                            
                            
                            

                                

                                    
                                
                                

                                    
                                

                            
                        
                    

submitHandler:验证通过后的操作，可以写ajax请求

addMethod：自定义验证方法，可以写正则匹配

validate：用于检查

以下为js示例

$.validator.setDefaults({
    submitHandler: function () {
        var values = {};
        var t = $('form#logon').serializeArray();
        $.each(t, function () {
            values[this.name] = this.value;
        });

        var infoP = $('div#modal-1 p#logOnInfo');
        var infoDiv = $('div#modal-1');

        $.ajax({
            type: "POST",
            url: "logon",
            contentType: 'application/json',
            data: JSON.stringify(values),
            success: function (data) {
                infoP.text(data.message);
                infoDiv.addClass("md-show");

            }
        });
    }
});

jQuery.validator.addMethod("isPassword", function (value, element) {
    var Regx = /^[A-Za-z0-9]*$/;

    return Regx.test(value);
}, "密码仅支持数字和字母");

$(function () {

    $("#logon").validate({
        rules: {
            name: {
                required: true,
                minlength: 6
            },
            password: {
                required: true,
                isPassword: true,
                minlength: 6
            },
            confirm_password: {
                required: true,
                isPassword: true,
                minlength: 6,
                equalTo: "#password"
            }
        },
        messages: {
            name: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 6 characters"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long",
                equalTo: "Please enter the same password as above"
            }
        },

        errorElement: "em",
        errorPlacement: function (error, element) {
            // Add the `help-block` class to the error element
            error.addClass("help-block");

            // Add `has-feedback` class to the parent div.form-group
            // in order to add icons to inputs
            element.parents(".col-md-6").addClass("has-feedback");

            if (element.prop("type") === "checkbox") {
                error.insertAfter(element.parent("label"));
            } else {
                error.insertAfter(element);
            }

            // Add the span element, if doesn't exists, and apply the icon classes to it.
            if (!element.next("span")[0]) {
                $("").insertAfter(element);
            }
        },
        success: function (label, element) {
            // Add the span element, if doesn't exists, and apply the icon classes to it.
            if (!$(element).next("span")[0]) {
                $("").insertAfter($(element));
            }
        },
        highlight: function (element, errorClass, validClass) {
            $(element).parents(".col-md-6").addClass("has-error").removeClass("has-success");
            $(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).parents(".col-md-6").addClass("has-success").removeClass("has-error");
            $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
        }
    });
    $("div#modal-1 button.md-close").click(function () {

        $('div#modal-1').removeClass("md-show");
    })
});