jquery.validate 插件使用

jQuery.validate插件是一个简单易用的插件，主要作用是在表单提交前进行相关输入项目的有效性验证，验证通过提交表单，否则提示错误；但需要特别注意的是，凡是需要采用该插件验证的表单项，均需要定义html的name属性信息，且和id值的定义一致，才能达到有效性验证目的

//==================插件验证一直不对哈，明显未通过验证也不提示错误=========================
        //==================注意哈，html元素必须设置name属性，且值和id的一直，才能有验证效果哦==========
        $("#detailsForm").validate({
            errorClass: "error",
            validClass: "success",
            errorElement: "span",
            wrapper: "li",
            errorLabelContainer: $("#errrow span"),
            errorContainer: $("#errrow"),
            rules: {
                name: { required: true },
                age: { range: [18, 150], number:true },
                address: { required: true, minlength: 10 },
                country: "required"
            },
            messages: {
                Name: "Please enter name",
                Age: "Please enter valid age",
                Address: "Please enter address (more than 10 chars)",
                Country: "Please select country"
            },
            submitHandler: function (form) {
                $.noop;
            }
        });

验证样式：

<style type="text/css">
        .row {
            height: 40px;
            width: 100%;
            position: relative;
            float: left
        }

        label {
            width: 80px;
            padding: 5px
        }

        input {
            width: 120px;
            height: 30px
        }
        span.error {
            color: red
        }
        input.error {
                border: 1px dotted red;
            }

        input.success {
                background: #ccc;
            }
    </style>

js代码验证表单否有效：

//=====================表达有效提交数据=================== 
if ($("#detailsForm").valid())
                {
                    values = { Name: $("#name").val(), Age: $("#age").val(), Address: $("#address").val(), Country: $("#country").val(), Married: $("#married").prop("checked") };
                    editItem = $.extend(editItem, values);
                    submitData(editItem);

                }


var submitData = function (e) {
        var i = $.Deferred();

        updateData = { Name: e.Name, Age: e.Age, Country: e.Country, Address: e.Address, Married: e.Married };
        $.ajax({
            url: '/Grid/UpdateData',
            type: 'put',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(updateData)
        }
        ).done(function (e) {
            alert('update data successed');
            i.resolve(e);
            $("#detailsDialog").dialog("close");

        }).fail(function (e) {
            alert('update failed!');
        });
        return i.promise();
    };

jquery.validate 插件使用

猜你喜欢