Jquery validation framework (3)

I don't know if you have found a problem. The verification rules in the last two sections are directly placed in the class. In fact, this framework also supports placing rules and msg in the class. But I believe few people will do this.

Although few people will do this. But I will show you the effect here.

Class = "{required: true, minlength: 5, messages: {required: 'Enter the content '}" Haha, you may be surprised when using this method!

In fact, I do not agree with this method. Sometimes demand changes! Sometimes it is necessary to write in this way.

I am not going to introduce this usage in this and later sections. In fact, it is easy to put it directly in the class.

In this section, we will introduce metadata and add some custom parameters to the form.

For example, put the error information in one block and disable keyup verification.

Step 1: Common form parameter settings

$ ("# Form"). each (function (){
$ (This). validate ({
ErrorElement: "div", // The packaging label of the error message
Wrapper: "li", // parent tag of the error message packaging tag
Onfocusout: false, // verification when the focus is disabled
Onkeyup: false, // verification when buttons are disabled
ErrorClass: "ErrorMsg", // class of the error message
Onclick: false, // disable checkbox, which is verified when radiobutton is clicked.
ErrorLabelContainer: $ ('# ErrorMsgContainer'), // wrap all the containers with errors
Ignre: ". ignore" // ignore input and select that do not require verification.
});

The above is what I used in our project. For Layout reasons, we use an errorClass: ErrorMsg block that displays error information in a set. In fact, we put the <ul class = "ErrorMsg"> </ul>

In addition, for business reasons, we may need to ignore some elements for non-verification when triggering verification. Ignore is required at this time. The ignore here is actually not verified for the elements that contain ignore in those classes.

For example, if <input type = "text" class = "inputtxt ignore" id = "txtName"/> is similar, the element is not verified. It's easy.

Step 2: What is metadata? How to use it?

In fact, the metadata plug-in is relatively simple and there is nothing to introduce. Let's take a look at what this file has. Paste the code first.

                                                               (                     type: 'class'                 name: 'metadata'                 cre: /({.*})/                 single: 'metadata'              setType:                  .defaults.type =                 .defaults.name =              get:                   settings = $.extend({},                                    (!settings.single.length) settings.single = 'metadata'                   data =                                   (data)                   data = "{}"                   getData =                       ( data != "string")                        (data.indexOf('{') < 0                         data = eval("(" + data + ")"                     getObject =                       ( data != "string")                       data = eval("(" + data + ")"                                         (settings.type == "html5"                      object =                     $(elem.attributes).each(                          name =                           (name.match(/^data-/)) name = name.replace(/^data-/, ''                                                    object[name] = getObject(                  }                       (settings.type == "class"                          m =                                                      data = m[1                     }   (settings.type == "elem"                          (!elem.getElementsByTagName)                           e =                                                      data = $.trim(e[0                     }   (elem.getAttribute !=                          attr =                                                      data =                      object = getObject(data.indexOf("{") < 0 ? "{" + data + "}"                                              $.fn.metadata =           $.metadata.get([0   })(jQuery);

In fact, we mainly look at this piece of code. The purpose of this file is to assist in the validation rules of the jquery validation main file formatting in the class.

Defaults :{
Type: 'class ',
Name: 'metadata ',
CRES :/({.*})/,
Single: 'metadata'
},

The first Type in this Code actually refers to the attributes in which we put the verification rules. By default, this file references the rules in the class. So the previous articles we introduced are all in the class.

But have you found any problems? If we put the verification rules and some styles in the class, it will become invalid. So at this time, the metadata file takes effect. We customize an attribute to store rules.

We only need to do this. Add the following sentence as needed to transform the rule to the validate attribute so that it will not conflict with other styles in the class.

$ (Function (){
/* Configure validate */
$. Metadata. setType ("attr", "validate ");

 

});

 

This is the effect of using metadat custom attributes in the project.