jQuery EasyUI---validatebox 校验规则扩展
来源:互联网 发布:淘宝运费险最高赔多少 编辑:程序博客网 时间:2024/04/30 05:23
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>
数据校验显示效果
效果如下图所以:
2 0
- jQuery EasyUI---validatebox 校验规则扩展
- jQuery EasyUI---validatebox 校验规则扩展
- jQuery EasyUI扩展:validatebox实现多重规则验证
- easyui 扩展 前端 ValidateBox 验证 校验 属性
- Jquery Easyui验证扩展,EasyUI增加校验规则,Easyui验证,Easyui校验
- jQuery Easyui Validatebox rules的常用扩展
- jQuery Easyui Validatebox rules的常用扩展
- jQuery Easyui Validatebox rules的常用扩展
- easyui的validatebox校验
- easyui ValidateBox validType字段设置多个校验规则
- 扩展的validatebox校验规则跑哪里去了
- jquery easyUi ValidateBox
- jQuery EasyUI自定义validatebox
- easyui ValidateBox validType验证规则
- easyui validatebox 去除校验 绑定校验
- EasyUI——validatebox扩展
- 扩展easyui 的表单验证easyui-validatebox
- jquery-easyui-validatebox【自定义验证】
- JConsole 远程监控Tomcat服务
- xargs用法详解
- linux 查看连接数,并发数
- python 模拟登录新浪微博
- linux 查看MySQL的当前连接数
- jQuery EasyUI---validatebox 校验规则扩展
- Python之基本数据类型+序列
- 数的变幻(小明买书)
- Android 完美适配多分辨率总结
- 数的变幻(波瓦松的分酒趣题)
- 基于Quick-cocos2d-x的资源更新方案 一
- 【转载】关于laravel的composer镜像加速
- 通过jconsole查看tomcat运行情况的配置方法——基于JDK1.5、Linux(Redhat5.5)、Tomcat6
- 基于Quick-cocos2d-x的资源更新方案 二