JQuery Easyui---validatebox validation rule extension

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);

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 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" > & Lt;input type= "text" name= "Dlg_drugid" id= "Dlg_drugid" hidden= "true"/> </div> <div style= "padding-to p:10px;padding-left:40px; " > <label for= "dlg_name" > Drug:</label> <input type= "text" name= "Dlg_name" id= "Dlg_name" class= "eas Yui-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" <spa n style= "color: #ff0000;" >class= "Easyui-validateboX "data-options=" Required:true,validtype: ' checkfloat ' "</span>/> </div> <div style=" padding-top:1 0px;padding-left:40px; " > <label for= "dlg_purchase_price" > Price:</label> <input type= "text" name= "Dlg_purchase_price" id= "D Lg_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" <spa n style= "color: #ff0000;" >class= "Easyui-validatebox" data-options= "Validtype: ' checknum '" </span>/> </div> <div style= "p adding-top:10px;padding-left:40px "align=" center "> <input type=" button "value=" Save "onclick=" Savetcmdrugpublicmapped () "class=" Bt_style "/> </div> </form> </div> </div></span>

Data checksum display effect

The effect of the following figure so: