jQuery插件EasyUI校验规则 validatebox验证框
投稿：lijiao
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了jQuery插件EasyUI校验规则，主要介绍validatebox验证框，对validatebox进行校验规则扩展，使用jQuery EasyUI的朋友可以参考下。
Web前端数据校验组件
Web项目中客户端与服务端的交互离不开Form表单，Form表单中最常用的元素莫过于input标签，input标签首先要用的肯定是text文本框啦！
input文本框允许用户任意输入，难免会会有用户输入一些不符合规定的数据，此时，在提交之前对数据校验是很有必要的，如果等到提交到服务端再校验就会大大降低用户体验啦。
前端校验有很多现成的组件，比较好用的有 EasyUI 的 validatebox 插件，提示界面做的相当友好，只是validatebox 默认提供的校验规则比较有限，有时我们需要添加自己的校验规则。
validator: function(value){
return ...?$/i.test(value);
message: 'Please enter a valid email address.'
validator: function(value){
return ...?$/i.test(value);
message: 'Please enter a valid URL.'
validator: function(value, param){
var len = $.trim(value).
return len &= param[0] && len &= param[1]
message: 'Please enter a value between {0} and {1}.'
validator: function(value, param){
var data = {};
data[param[1]] =
var response = $.ajax({
url:param[0],
dataType:'json',
data:data,
async:false,
cache:false,
type:'post'
}).responseT
return response == 'true';
message: 'Please fix this field.'
自定义校验规则
添加新的校验规则时最好不要在EasyUI的源文件中进行，第一是避免因误操作而导致污染了EasyUi源码，更重要的是考虑到以后容易进行组件升级。所以最合理的办法是单独写自己的扩展文件。
比如：我在原有规则的基础上新增了以下三项校验，单独文件 easyui-extend-rcm.js：
(function($) {
* jQuery EasyUI 1.4 --- 功能扩展
* Copyright (c)
* 新增 validatebox 校验规则
$.extend($.fn.validatebox.defaults.rules, {
validator: function(value, param) {
return idCardNoUtil.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文件之后：
&pre name="code" class="javascript"&&span style="font-size:18"&&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:"&&/pre&
然后在Html中如下引用即可，一定要加Class 和 data-options两个属性：&br&
&p&&/p&&pre class="brush:"&&pre name="code" class="&a href=" http:="" www.jb51.net="" kf="" qianduan="" css="" "="" target="_blank"&html"&&span style="font-size:18"&&div id="dlg" class="easyui-dialog" style="width:300 height:300 vertical-align:" closed="true" title="'添加中药'" buttons="#dlg-buttons"&
&div id="editForm" style="background:'';padding:20width:200height:200 display:"&
&form id="form" method="post"&
&div style="padding-left:16padding-top:20" hidden="true"&
&input type="text" name="dlg_drugId" id="dlg_drugId" hidden="true"&
&div style="padding-top:10padding-left:40"&
&label for="dlg_name"&药物:&/label&
&input type="text" name="dlg_name" id="dlg_name" class="easyui-validatebox" readonly="readonly"&
&div style="padding-top:10padding-left:40"&
&label for="dlg_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 style="padding-top:10padding-left:40"&
&label for="dlg_purchase_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 style="padding-top:10padding-left:40"&
&label for="dlg_stock"&库存:&/label&
&input type="text" name="dlg_stock" id="dlg_stock" &span="" style="color:#ff0000;"&class="easyui-validatebox" data-options="validType:'checkNum'" /&
&div style="padding-top:10padding-left:40" align="center"&
&input type="button" value="保存" onclick="saveTCMDrugPublicMapped()" class="bt_style"&
&/div&&/span&&/pre&&br&
&pre class="brush:"&&/pre&
&h1&数据校验显示效果&/h1&
&p&效果如下图所以：&/p&
&p&&img src="21.png" alt="" style="width: 378 height: 213"&&br&
希望通过这篇文章的学习对jQuery EasyUI validatebox校验规则更加了解。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具随笔 - 29&
评论 - 54&
&&&&&&&&&&&
表单作如下定义：该input使用easyui的"easyui-textbox"
1 &input id="addSnumber" style="width: 200 height: 30" class="easyui-textbox" type="text" name="snumber" data-options="required:true, missingMessage:'请输入学号'" /&
设置值的方式：
1 //使用表单选择器：代码似乎是有异常的
2 //$("input[name='snumber']").textbox('setValue', "22012");
3 //使用表单选择器：代码没有异常 但不能为input设置值
4 //$("input[name='snumber']").val("22012");
5 //使用id选择器：不能设置值
6 //$("#addSnumber").val("22012");
7 //使用id选择器：可以设置值
8 $("#addSnumber").textbox('setValue', "22012");
9 //使用id选择器和setText：可以设置值
10 $("#addSnumber").textbox('setText', "22012");
所以：为text-box设置值只能使用id选择器选择表单元素，然后使用textbox("setValue", value); 的方式设置值；
获取值也是如此：
var snumber = $("#addSnumber").textbox('getValue');
easyui-validatebox的设置值或获取值的方式又有点不一样
表单作如下定义:
1 &input id="addSnumber" style="width: 200 height: 30" class="easyui-validatebox" type="text" name="snumber" data-options="required:true, missingMessage:'请输入学号'" /&
获取值的方式：
1 //这种方式是可以设置值的
2 //$("#addSnumber").val("22015");
3 //可以设置值
4 //$("input[name=snumber]").val("22015");
5 //不能设置值，且语法不对有异常
6 //$("input[name=snumber]").textbox("setValue", "22015");
7 //不能设置值，且语法不对有异常
8 //$("input[name=snumber]").textbox("setText", "22015");
9 //不能设置值，且语法不对有异常
10 //$("#addSnumber").textbox("setvalue", "22015");
所以：validatebox只能用$().val()方式设置和获取值，选择器既可以用id选择器，也可以用表单选择器
总结：表单元素使用easyui时，textbox和validatebox设置值和获取值的方式不一样
　　为text-box设置值只能使用id选择器选择表单元素，只能使用textbox("setValue", value) 或 textbox("seText", value)&的方式设置值，使用textbox("getValue") 或textbox("getText") 获取值；
　　为validatebox设置值可以使用id选择器和表单选择器，只能使用val()获取值和设置值。
阅读(...) 评论()