JQuery EasyUI --- validatebox validation rule extension, jqueryeasyui Verification

JQuery EasyUI --- validatebox validation rule extension, jqueryeasyui Verification
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

In addition to introducing EasyUI files in

<pre name="code" class="javascript"><span style="font-size:18px;"><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></span>

Then you can reference the following in Html. You must add the Class and data-options attributes:

<Pre name = "code" class = "html"> <span style = "font-size: 18px; "> <div id =" dlg "class =" easyui-dialog "style =" width: 300px; height: 300px; vertical-align: middle; "closed =" true "title = 'add Chinese herbal medicine 'buttons =" # dlg-buttons "> <div id =" editForm "style =" background: ''; padding: 20px; width: 200px; height: 200px; display: none; "> <form id =" form "method =" post "> <div style =" padding-left: 16px; padding-top: 20px; "hidden =" true "> <input type =" text "name =" dlg_drugId "id =" dlg_drugId "hidden =" true "/> </div> <div style =" padding-top: 10px; padding-left: 40px; "> <label for =" dlg_name "> drugs: </label> <input type = "text" name = "dlg_name" id = "dlg_name" class = "easyui-validatebox" readonly = "readonly"/> </div> <div style = "padding-top: 10px; padding-left: 40px; "> <label for =" dlg_price "> unit price: </label> <input type = "text" name = "dlg_price" id = "dlg_price" <span style = "color: # ff0000; "> class =" easyui-validatebox "data-options =" required: true, validType: 'checkfloat' "</span>/> </div> <div style =" padding-top: 10px; padding-left: 40px; "> <label for =" dlg_purchase_price "> price: </label> <input type =" text "name =" dlg_purchase_price "id =" dlg_purchase_price "<span style =" color: # ff0000; "> class =" easyui-validatebox "data-options =" validType: 'checkfloat' "</span>/> </div> <div style =" padding-top: 10px; padding-left: 40px; "> <label for =" dlg_stock "> Inventory: </label> <input type =" text "name =" dlg_stock "id =" dlg_stock "<span style =" color: # ff0000; "> class =" easyui-validatebox "data-options =" validType: 'checknum' "</span>/> </div> <div style =" padding-top: 10px; padding-left: 40px; "align =" center "> <input type =" button "value =" save "onclick =" saveTCMDrugPublicMapped () "class =" bt_style "/> </div> </form> </div> </span>

Data validation Display Effect

The result is as follows: