jquery Plugin Easyui checksum validatebox validation box _jquery

Web front-end data validation component

The interaction between client and server in Web projects is inseparable from form forms, the most commonly used element of form form is input label, the input label must be used first text box!

Input text box allows users to enter arbitrary, it is inevitable that there will be users to enter some inconsistent data, at this time, before submitting data verification is very necessary, if you wait until the delivery to the server to verify the user experience will be greatly reduced.

Front-end checksum has a lot of ready-made components, more useful with Easyui Validatebox plug-ins, prompts the interface to do very friendly, just validatebox the default to provide a more limited validation rules, sometimes we need to add their own validation rules.

Rules: {
  email:{
  validator:function (value) {return
   ...? $/i.test (value);
  }, message
  : ' Please enter an 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 CHECKSUM Rules

It is best not to add a new checksum rule in the Easyui source file, the first is to avoid the misuse caused by the pollution of the Easyui source code, more importantly, considering the future component upgrades easily. So the most reasonable way is to write your own extension file alone.

For example: I added the following three checksum on the basis of the original rule, separate file Easyui-extend-rcm.js:

(function ($) {
 /**
 * jQuery Easyui 1.4---feature extension
 * * 
 Copyright (c) 2009-2015 RCM
 *
 * Add Validatebox Checksum 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: ' Enter integer '
 },
 checkfloat: {
  validator:function (value, param) {return
  /^[+|-]? ( [0-9]+\. [0-9]+) | [0-9]+$/.test (value);
  },
  message: ' Enter legal number '}
 }
] (JQuery);

Custom rule Usage
introduces its own extension files in addition to the Easyui files, in order after the Easyui file:
<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></pre> <pre Class= "Brush:java;" ></pre> then refer to the following in HTML, be sure to add Class and data-options two attributes:<br> <br> <p></p><pre class= "Brush:java;" ><pre name= "code" class= "<a href=" http:= "" www.jb51.net= "" kf= "" qianduan= "" css= "" "=" "target=" _blank "> 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 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" > <i Nput type= "text" name= "Dlg_drugid" id= "Dlg_drugid" hidden= "true" > </div> <diV style= "padding-top:10px;padding-left:40px;" > <label for= "dlg_name" > Drug:</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 '"/> </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 '"/> </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 '"/> </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></pre><br> <br > <p></p> <pre class= "Brush:java;" ></pre> <p></p>  

The

wants to learn more about the jquery Easyui Validatebox validation rules through this article.