Extension of the validation type for Easyui-validatebox

Easyui provides us with a validatebox type of component that can be used to automate verification and is very convenient. It is important to note that each component in the Easyui has an inheritance relationship. By looking at Api,textbox inheritance Validatebox, and other component types that directly or indirectly inherit the textbox, as long as you use the class of the Easyui form plugin, naturally we can use its validation framework.

I. Self-test type

Easyui-validatebox provides us with the basic verification, there are five kinds, respectively, required, email, URL, length[0,100], remote[' http://.../action.do ', ' paramname ‘]。

<inputtype= "text"name= "a"class= "Easyui-validatebox"data-options= "Required:true"><inputtype= "text"name= "B"class= "Easyui-validatebox"data-options= "Required:true,validtype: ' Email '"><inputtype= "text"name= "C"class= "Easyui-validatebox"data-options= "required:true,validtype:length[6,9]"><!--Easyui 1.3.2 Available later -<inputtype= "text"name= "D"class= "Easyui-validatebox"data-options= "required:true,validtype:[' email ', ' length[6,9] '">
<!--The remote type is not demonstrated, because it is essentially AJAX authentication, but Ajax is generally to have special processing, we call Ajax to verify it--    --

Is it so easy to see if Easyui-validatebox is used? However, it only provides us with a more basic type of validation, and if there are more requirements, we need to customize the validation type ourselves.

Two. Custom Authentication type:

Custom validation types provided by 1.api

$.extend ($.fn.validatebox.defaults.rules, {//Verify that two input boxes are equalequals: {validator:function(value,param) {returnValue = = $ (param[0]). Val (); }, Message:' Field does not match. '    },    //Minimum length of inputminLength: {validator:function(value, param) {returnValue.length >= param[0]; }, Message:' Please enter at least {0} characters. '    }});

<!--Verify that the passwords entered for two times are equal -<inputID= "pwd"name= "pwd"type= "Password"class= "Easyui-validatebox"data-options= "Required:true"><inputID= "Rpwd"name= "Rpwd"type= "Password"class= "Easyui-validatebox"Required= "Required"Validtype= "equals[' #pwd ']"><!--Verify the minimum length of the input field -<inputclass= "Easyui-validatebox"data-options= "Validtype: ' minlength[5] '">

Once we have defined the custom validation type, we can use the same type as Easyui provided to us.

Note that equals[' #pwd '] passed in an ID, and minlength[5] passed in a numeric value, which depends on the internal implementation. param in "validator:function (value, param) {}" is an array type.

Here to add, in fact, Easyui is essentially a jquery plug-in, and our custom type is the extension of the jquery plugin method. More about the jquery plugin problem, you can check other information, of course, I will also summarize it later.

2. More Custom types

/** Compare the size of two dates * The recommended parameter for incoming parameters is "YYYY-MM-DD" format, other date formats are also possible, but to ensure consistency*/varDatecompare =function(Date1, date2) {if(Date1 &&date2) {        varA =NewDate (date1); varb =NewDate (DATE2); returnA <b; }}/** Extension of the validation type for Easyui-validatebox*/$.extend ($.fn.validatebox.defaults.rules, {//Mobile phone numberMobile: {validator:function(value, param) {return/^0{0,1}1[3,8,5][0-9]{9}$/. Test (value); }, Message:"Cell phone number format is incorrect"    },    //ID CardIdcard: {validator:function(value, param) {return/^\D{15} (\d{2}[a-za-z0-9])? $/i.test (value); }, Message:"Please enter the correct ID number"    },    //Compare time Pickercomparedate: {validator:function(value, param) {returnDatecompare ($ (param[0]).Datetimebox("GetValue"), value); }, Message:"End date cannot be less than start date"    }});

Here are just a few of the more commonly used custom types and will continue to complement them in the future.

Three. Summary

Easyui-validatebox is a lightweight verification framework, but it also supports customization, so the functionality is very powerful. In fact, in the process of customizing validation types, I think the most important thing is the knowledge of regular expressions.

Extension of the validation type for Easyui-validatebox