jQuery.validator插件使用

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

django引入插件:

    <script src="{% static 'js/validation/jquery.validate.min.js' %}"></script>
    <script src="{% static 'js/validation/messages_zh.min.js' %}"></script>

html代码片段

<form class="form-horizontal" method="post" id="logon" name="logon">
                        <fieldset>
                            <!-- Name input-->
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="name">Name</label>
                                <div class="col-md-6">
                                    <input id="name" name="name" type="text" placeholder="Your name"
                                           class="form-control">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label" for="password">password</label>
                                <div class="col-md-6">
                                    <input id="password" name="password" type="password" placeholder="Your password"
                                           class="form-control">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label" for="confirm_password">confirm password</label>
                                <div class="col-md-6">
                                    <input id="confirm_password" name="confirm_password" type="password"
                                           placeholder="confirm password"
                                           class="form-control">
                                </div>
                            </div>

                            
                            <!-- Form actions -->
                            <div class="form-group" id="commit">
                                <div class="col-md-12 widget col-md-6">
                                    <input id="logon_button" type="submit" class="btn btn-primary btn-md pull-right"
                                           value="注册">
                                </div>
                                <div class="col-md-12 widget col-md-6">
                                    <input type="reset" class="btn btn-primary btn-md" value="重置">
                                </div>

                            </div>
                        </fieldset>
                    </form>

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]) {
                $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>").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]) {
                $("<span class='glyphicon glyphicon-ok form-control-feedback'></span>").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");
    })
});