JQuery plugin EasyUI validation rule validatebox verification box _ jquery-js tutorial

This article mainly introduces the EasyUI validation rules of the jQuery plug-in, mainly introduces the validatebox verification box, and extends the validation rules of validatebox. For friends who use jQueryEasyUI, refer. Web Front-end data verification component

In a Web project, the interaction between the client and the server is inseparable from Form forms. The most common element in Form forms is the input label. The input label must first use the text box!

The input text box allows users to enter any data, which may inevitably lead to some non-conforming data. At this time, it is necessary to verify the data before submission, if you wait until it is submitted to the server for verification, the user experience will be greatly reduced.

There are many ready-made components in front-end verification, and the EasyUI validatebox plug-in is easy to use. The prompt interface is very friendly, but the verification rules provided by validatebox by default are relatively limited, sometimes we need to add our own validation rules.

rules: {  email:{  validator: function(value){   return ...?$/i.test(value);  },  message: 'Please enter a valid email address.'  },  url: {  validator: function(value){   return ...?$/i.test(value);  },  message: 'Please enter a valid URL.'  },  length: {  validator: function(value, param){   var len = $.trim(value).length;   return len >= param[0] && len <= param[1]  },  message: 'Please enter a value between {0} and {1}.'  },  remote: {  validator: function(value, param){   var data = {};   data[param[1]] = value;   var response = $.ajax({   url:param[0],   dataType:'json',   data:data,   async:false,   cache:false,   type:'post'   }).responseText;   return response == 'true';  },  message: 'Please fix this field.'  } },

Custom validation rules

When adding a new validation rule, it is best not to do it in the EasyUI source file. The first is to avoid contamination of the EasyUi source code due to misoperations. More importantly, it is easy to upgrade components in the future. Therefore, the most reasonable method is to write your own extension files.

For example, I added the following three checks on the basis of the original rules, a separate file easyui-extend-rcm.js:

(Function ($) {/*** jQuery EasyUI 1.4 --- function Extension ** Copyright (c) 2009-2015 RCM ** added validatebox validation rules **/$. extend ($. fn. validatebox. defaults. rules, {idcard: {validator: function (value, param) {return idCardNoUtil. checkIdCardNo (value) ;}, message: 'Enter the correct ID card number '}, checkNum: {validator: function (value, param) {return/^ ([0-9] +) $ /. test (value) ;}, message: 'enter an integer '}, checkFloat: {validator: fu Nction (value, param) {return/^ [+ |-]? ([0-9] + \. [0-9] +) | [0-9] + $ /. test (value) ;}, message: 'enter valid number'}) ;}( jQuery );

How to use custom rules
In addition to introducing EasyUI files, you also need to introduce your own extension files, following the EasyUI file in sequence: