JQuery EasyUI --- validatebox validation rule Extension

JQuery EasyUI --- validatebox validation rule Extension
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: function (value, pa Ram) {return/^ [+ |-]? ([0-9] + \. [0-9] +) | [0-9] + $ /. test (value) ;}, message: 'enter valid number'}) ;}( jQuery );

How to use custom rules

InIn addition to introducing EasyUI files, you also need to introduce your own extension files, in sequence after the EasyUI file:

<script src="#WEBROOT()/static/jseasyui/jquery.easyui.min.js" type="text/javascript" ></script><script src="#WEBROOT()/static/js/comm/easyui-extend-rcm.js" type="text/javascript"></script>
Then you can reference the following in Html. You must add the Class and data-options attributes:



Data validation Display Effect
The result is as follows: