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 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
VUE重点问题总结
Mar 19 Javascript
React如何避免重渲染
Apr 10 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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缓存函数的使用说明
2013/05/10 PHP
php实现websocket实时消息推送
2018/03/30 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
Python3的socket使用方法详解
2020/02/18 Python
Python中常用的os操作汇总
2020/11/05 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
公交公司毕业生求职信
2014/02/15 职场文书
销售主管竞聘书
2014/03/31 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
书法大赛策划方案
2014/06/04 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
优秀班组申报材料
2014/12/25 职场文书
预备党员群众意见
2015/06/01 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
实现一个简单得数据响应系统
2021/11/11 Javascript
JavaScript流程控制(循环)
2021/12/06 Javascript
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python