jQuery插件EasyUI校验规则 validatebox验证框
Web前端数据校验组件
Web项目中客户端与服务端的交互离不开Form表单，Form表单中最常用的元素莫过于input标签，input标签首先要用的肯定是text文本框啦！
input文本框允许用户任意输入，难免会会有用户输入一些不符合规定的数据，此时，在提交之前对数据校验是很有必要的，如果等到提交到服务端再校验就会大大降低用户体验啦。
前端校验有很多现成的组件，比较好用的有EasyUI的validatebox插件，提示界面做的相当友好，只是validatebox默认提供的校验规则比较有限，有时我们需要添加自己的校验规则。
rules:{
email:{
validator:function(value){
return...?$/i.test(value);
},
message:'Pleaseenteravalidemailaddress.'
},
url:{
validator:function(value){
return...?$/i.test(value);
},
message:'PleaseenteravalidURL.'
},
length:{
validator:function(value,param){
varlen=$.trim(value).length;
returnlen>=param[0]&&len<=param[1]
},
message:'Pleaseenteravaluebetween{0}and{1}.'
},
remote:{
validator:function(value,param){
vardata={};
data[param[1]]=value;
varresponse=$.ajax({
url:param[0],
dataType:'json',
data:data,
async:false,
cache:false,
type:'post'
}).responseText;
returnresponse=='true';
},
message:'Pleasefixthisfield.'
}
},
自定义校验规则
添加新的校验规则时最好不要在EasyUI的源文件中进行，第一是避免因误操作而导致污染了EasyUi源码，更重要的是考虑到以后容易进行组件升级。所以最合理的办法是单独写自己的扩展文件。
比如：我在原有规则的基础上新增了以下三项校验，单独文件easyui-extend-rcm.js：
(function($){
/**
*jQueryEasyUI1.4---功能扩展
*
*Copyright(c)2009-2015RCM
*
*新增validatebox校验规则
*
*/
$.extend($.fn.validatebox.defaults.rules,{
idcard:{
validator:function(value,param){
returnidCardNoUtil.checkIdCardNo(value);
},
message:'请输入正确的身份证号码'
},
checkNum:{
validator:function(value,param){
return/^([0-9]+)$/.test(value);
},
message:'请输入整数'
},
checkFloat:{
validator:function(value,param){
return/^[+|-]?([0-9]+\.[0-9]+)|[0-9]+$/.test(value);
},
message:'请输入合法数字'
}
});
})(jQuery);
自定义规则使用方式
在中除了引入EasyUI的文件之外，还要引入自己的扩展文件，顺序在EasyUI文件之后：
<prename="code"class="javascript"><spanstyle="font-size:18px;"><scriptsrc="#WEBROOT
()/static/jseasyui/jquery.easyui.min.js"type="text/javascript"></script> <scriptsrc="#WEBROOT()/static/js/comm/easyui-extend-rcm.js"type="text/javascript"></script></span></pre> <preclass="brush:java;"></pre> 然后在Html中如下引用即可，一定要加Class和data-options两个属性：<br> <br> <p></p><preclass="brush:java;"><prename="code"class="<ahref="http:=""www.nhooo.com=""kf=""qianduan=""css="""=""target="_blank">html"><spanstyle="font-size:18px;"><divid="dlg"class="easyui-dialog"style="width:300px;height:300px;vertical-align:middle;"closed="true"title="'添加中药'"buttons="#dlg-buttons"> <divid="editForm"style="background:'';padding:20px;width:200px;height:200px;display:none;"> <formid="form"method="post"> <divstyle="padding-left:16px;padding-top:20px;"hidden="true"> <inputtype="text"name="dlg_drugId"id="dlg_drugId"hidden="true"> </div> <divstyle="padding-top:10px;padding-left:40px;"> <labelfor="dlg_name">药物:</label> <inputtype="text"name="dlg_name"id="dlg_name"class="easyui-validatebox"readonly="readonly"> </div> <divstyle="padding-top:10px;padding-left:40px;"> <labelfor="dlg_price">单价:</label> <inputtype="text"name="dlg_price"id="dlg_price"<span=""style="color:#ff0000;">class="easyui-validatebox"data-options="required:true,validType:'checkFloat'"/> </div> <divstyle="padding-top:10px;padding-left:40px;"> <labelfor="dlg_purchase_price">进价:</label> <inputtype="text"name="dlg_purchase_price"id="dlg_purchase_price"<span=""style="color:#ff0000;">class="easyui-validatebox"data-options="validType:'checkFloat'"/> </div> <divstyle="padding-top:10px;padding-left:40px;"> <labelfor="dlg_stock">库存:</label> <inputtype="text"name="dlg_stock"id="dlg_stock"<span=""style="color:#ff0000;">class="easyui-validatebox"data-options="validType:'checkNum'"/> </div> <divstyle="padding-top:10px;padding-left:40px;"align="center"> <inputtype="button"value="保存"onclick="saveTCMDrugPublicMapped()"class="bt_style"> </div> </form> </div> </div></span></pre><br> <br> <p></p> <preclass="brush:java;"></pre> <p></p> <h1>数据校验显示效果</h1> <p>效果如下图所以：</p> <p><imgsrc="20150130/20150130084015121.png"alt=""style="width:378px;height:213px;"><br> </p></pre>
希望通过这篇文章的学习对jQueryEasyUIvalidatebox校验规则更加了解。