JQuery easyui validatebox Validation rule extension and Easyui check box Validatebox usage _jquery

First, share the data checksum display effect

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 '} 
}; 

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 >

Then in HTML you can refer to the following, and be sure to add Class and data-options two 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 traditional 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" > < Input 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 ' "</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> </div></span>

Detailed jquery easyui check box Validatebox usage

The JQuery easyui verification Box (Validatebox) provides us with a convenient way to verify the form

<input id= "VV" required= "true" validtype= "email" >

Property

Property name	Type	Describe	Default value
Required	Boolean	Define whether the text field is required	False
Validtype	String	Define validation types for fields such as email, url, etc.	Null
Missingmessage	String	Text message that prompts when the text box is empty	This field is required
Invalidmessage	String	Text message to prompt when text box content is not valid	Null

Method

Method name	Parameters	Describe
Destroy	None	Remove and destroy components
Validate	None	Validation to determine whether the contents of the text box are valid
IsValid	None	invokes the validation method and returns the result of the validation. true or false

Note here in addition to the required property, if the Validtype property fails. The form submission is not blocked. So here we are, if we want to block form submission, we're going to take advantage of the jquery UI Submission Form method

The specific wording is

$ (": Submit"). Click (function () {
if (!$ ("#form"). Form (' Validate ') {return
false;
}
})
ID of #form是 <form> form