JQuery Easyui---validatebox validation rule extension

Web front end data validation component

The interaction between client and server in Web project is inseparable from form form, the most common element in form form is input tag, and the input tag must be the text textbox first.

Input text box allows the user arbitrary input, there will inevitably be a user input some non-conforming data, at this time, before the submission of data verification is necessary, if you wait until the submission to the service side of the verification will greatly reduce the user experience.

Front-end check has a lot of ready-made components, relatively easy to use Easyui Validatebox plug-ins, the prompt interface is very friendly, just Validatebox The default provides a limited number of calibration rules, sometimes we need to add their 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}. '},re Mote: {validator:function (value, param) {var data = {};d ata[param[1]] = Value;var Response = $.ajax ({Url:param[0],datatyp E: ' JSON ', Data:data,async:false,cache:false,type: ' Post '}). Responsetext;return response = = ' true ';},message: ' Please Fix this field. '}},

Custom validation rules

It is best not to add a new validation rule in the Easyui source file, the first is to avoid the misuse of the Easyui source of pollution, more importantly, considering the easy component upgrade in the future. So the most logical way is to write your own extension files separately.

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

(function ($) {/** * jQuery Easyui 1.4---feature extension *  * Copyright (c) 2009-2015 RCM * * Added validatebox check rule * */$.extend ($. Fn.validatebox.defaults.rules, {idcard: {validator:function (value, param) {return Idcardnoutil.checkidcardno (value) },message: ' Please enter the correct ID number '},checknum: {validator:function (value, param) {return/^ ([0-9]+] $/.test (value);},message: ' Please enter an integer '},checkfloat: {validator:function (value, param) {return/^[+|-]? ( [0-9]+\. [0-9]+) | [0-9]+$/.test (value);},message: ' Please enter a valid number '}}) (JQuery);

How custom rules are used

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 in the HTML as follows, you must add Class and Data-options two properties:

<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= ' added Chinese herbal medicine ' buttons=" #dlg-buttons "><div id=" EditForm "style=" Background: ";p adding: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" > 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" > Input 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" > Stock: </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></div></span>

data Check Display effect

Effect as so:

JQuery Easyui---validatebox validation rule extension