jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法


Posted in Javascript onJanuary 18, 2016

先给大家分享数据校验显示效果

jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

Web前端数据校验组件

Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦!

input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦。

前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validatebox 默认提供的校验规则比较有限,有时我们需要添加自己的校验规则。

rules: { 
email:{ 
validator: function(value){ 
return ...?$/i.test(value); 
}, 
message: 'Please enter a 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.' 
} 
}

自定义校验规则

添加新的校验规则时最好不要在EasyUI的源文件中进行,第一是避免因误操作而导致污染了EasyUi源码,更重要的是考虑到以后容易进行组件升级。所以最合理的办法是单独写自己的扩展文件。

比如:我在原有规则的基础上新增了以下三项校验,单独文件 easyui-extend-rcm.js:

(function($) { 
/** 
* jQuery EasyUI 1.4 --- 功能扩展 
* 
* Copyright (c) 2009-2015 RCM 
* 
* 新增 validatebox 校验规则 
* 
*/ 
$.extend($.fn.validatebox.defaults.rules, { 
idcard: { 
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);

自定义规则使用方式

在<head>中除了引入EasyUI的文件之外,还要引入自己的扩展文件,顺序在EasyUI文件之后:

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

然后在Html中如下引用即可,一定要加Class 和 data-options两个属性:

<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='添加中药' buttons="#dlg-buttons"> 
<div id="editForm" style="background:'';padding: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">药物:</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">单价:</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">进价:</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">库存:</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="保存" onclick="saveTCMDrugPublicMapped()" class="bt_style" /> 
</div> 
</form> 
</div> 
</div></span>

详解jQuery easyui 校验框validatebox用法

JQuery EasyUI 验证框(ValidateBox)在表单的验证方面给我们提供了很方便的方法

<input id="vv" required="true" validType="email">

属性

属性名 类型 描述 默认值
required 布尔 定义文本域是否为必填项 false
validType 字符串 定义字段的验证类型比如email, url, etc. null
missingMessage 字符串 当文本框为空时提示的文本信息 This field is required
invalidMessage 字符串 当文本框内容不合法时提示的文本信息 null

方法

方法名 参数 描述
destroy none 删除并且销毁组件
validate none 做验证以确定文本框的内容是否是有效的
isValid none 调用验证方法并返回验证结果,true或者false

注意这里除了required属性外,若validType属性失败.并不会阻止表单提交..所以我们这里如果要阻止表单提交,就又要利用jquery ui提交的表单方法

具体写法是

$(":submit").click(function(){
if(!$("#form").form('validate')){
return false;
}
})
#form是<form>表单的ID
Javascript 相关文章推荐
jquery提升性能最佳实践小结
Dec 06 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
Angular.JS中的this指向详解
May 17 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
深入理解vue Render函数
Jul 19 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 #Javascript
实例详解jQuery表单验证插件validate
Jan 18 #Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 #Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 #Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 #Javascript
轻松实现js图片预览功能
Jan 18 #Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 #Javascript
You might like
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python中设置变量访问权限的方法
2015/04/27 Python
Python贪心算法实例小结
2018/04/22 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
python搜索包的路径的实现方法
2019/07/19 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
会计电算化应届生求职信
2013/11/03 职场文书
校园招聘策划书
2014/01/09 职场文书
校园安全检查制度
2014/02/03 职场文书
幼儿园开学通知
2015/04/24 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
合同补充协议书
2016/03/24 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
python process模块的使用简介
2021/05/14 Python
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js