jquery Plugin Easyui checksum validatebox validation box _jquery

Source: Internet
Author: User
Tags extend valid email address

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: {
  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 ({
   dataType: ' json ',
   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>  


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.