Easyui的validatebox验证方法自定义扩展

由于easyui的validatebox本身提供的验证方法较少,故对其进行了自定义扩展。

1、新建一个js文件 —— extendValidateboxRules.js   ,内容如下:

/**
* auther by Highness
* date : xxxx-xx-xx
*/

// 时间格式规范
var regex_dateTime = /\d{4}\-\d{2}\-\d{2} \d{2}\:\d{2}:\d{2}/;//@author ren

$.extend($.fn.validatebox.defaults.rules, {

// 字符最大长度(param传参)
maxLength: {

validator: function(value, param){

return value.length <= param[0];

},

message: ‘您输入的字数太长了,最多{0}个字‘

},

// 验证姓名,可以是中文或英文

name : {

validator : function(value) {

return /^[\u0391-\uFFE5]{1,20}$/i.test(value)|/^\w+[\w\s]+\w+$/i.test(value);

},

message : ‘姓名字数过多或应为中文或者英文‘

},

// 验证身份证

idcard : {

validator : function(value) {

return /^\d{15}(\d{2}[Xx0-9])?$/i.test(value);

},

message : ‘身份证应为15位或者18位‘

},

// 验证IP地址
ip : {
validator : function(value) {
return /\d+\.\d+\.\d+\.\d+/.test(value);
},
message : ‘IP地址格式不正确‘
},

//年龄验证
age : {

validator : function(value) {

return /^[0-9]{1,2}$/i.test(value);//0-99

},

message : ‘您输入的年龄不合法‘

},

// 验证电话号码
phone : {

validator : function(value) {

return /^1\d{10}$/i.test(value) || /^0\d{2,3}-?\d{7,8}$/i.test(value);

},

message : ‘电话号码正确格式:15288888888或020(0310)-88888888‘

},

// 验证数字,整数或小数
number : {

validator : function(value) {

return /^\d{1,10}(\.\d{0,4})?$/i.test(value);

},

message : ‘请输入正确的金额‘

},

// 验证数字,只能为整数
integer : {

validator : function(value) {

return /^\d{1,12}$/i.test(value);

},

message : ‘请输入一个整数‘

},

// 时间验证
//@author ren
/* start */
endToStart: {

validator: function(value, param) {

return value>$("#"+param[0]+" input[name=‘"+param[1]+"‘]").val();//结束时间>开始时间

},

message: ‘结束时间应晚于起始时间‘

},

startToEnd: {

validator: function(value, param) {

return value>$("#"+param[0]).datetimebox(‘getValue‘);//结束时间>开始时间

},

message: ‘结束时间应晚于起始时间‘

},

datetimeValidate: {

validator: function(value, param) {

return regex_dateTime.test(value);//验证时间格式是否规范

},

message: ‘时间格式应为 2015-01-01 12:00:00‘

}
/* end */
});

2、在html页面引入该js文件
<!-- 扩展Easyui validatebox 的验证方法 -->
<script src="js/jquery/jquery-easyui-1.3.6/extendValidateboxRules.js"></script>

3、在html代码中添加验证
例如:身份证号规范性验证,只需在validType="idcard"修改为自定义的验证方法名即可。

<input type="text" class="easyui-validatebox" required="true" validType="idcard" />
4、在js中添加验证
//联系方式

var lxfs = $("#FormID :input[name=‘iPhone‘]").validatebox({

required:true,

validType : ‘phone‘,

missingMessage:"请输入联系方式"

});

验证方法为:

if(!lxfs.validatebox(‘isValid‘)){
<span style="white-space:pre"> </span>alert(‘联系方式输入有误!‘);
}

————————————————
版权声明:本文为CSDN博主「Hgihness」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/javahighness/article/details/47122303

原文地址:https://www.cnblogs.com/UUUz/p/11969598.html

时间: 2024-10-03 18:59:23

Easyui的validatebox验证方法自定义扩展的相关文章

Jquery EasyUI 中ValidateBox验证框使用讲解

Validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息.该验证框可以结合form(表单)插件并防止表单重复提交. 使用$.fn.validatebox.defaults重写默认值对象. 具体用法如下: <input id="email" class="easyui-validatebox" data-options="required:true,val

easyUI之validatebox验证框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>01_validatebox.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link

jQuery Validate 表单验证插件----自定义一个验证方法

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"

ValidateBox( 验证框) 组件

本节课重点了解 EasyUI 中 ValidateBox(验证框)组件的使用方法,这个组件依赖于Tooltip(提示框)组件. 一. 加载方式//class 加载方式<input id="email" class="easyui-validatebox"data-options="required:true,validType:'email'" />//JS 加载调用$('#email').validatebox({required

EasyUI 扩展自定义EasyUI校验规则 验证规则(常用的)

例如 校验输入框只能录入0-1000之间 最多有2位小数的数字 表单<input type="text" id="rate" name="rate" required="true" class="easyui-validatebox"  validType="rateCheck[0,1000]"  maxlength="6" /> $.extend($.f

WinForm TextBox自定义扩展方法数据验证

本文转载:http://www.cnblogs.com/gis-crazy/archive/2013/03/17/2964132.html 查看公司项目代码时,存在这样一个问题:winform界面上有很多信息填写,提交后台服务器更新,但数据的合法验证及值的转换却不太敢恭维,一堆的if判断和转换,便想着是否能扩展个方法出来,琢磨出个思路,记录下来与大家共同探讨,有不对的地方还请大家指正. 设计思路: 1. 由于大部分从TextBox控件中获取数据值,可以扩展个泛型方法出来,直接根据转换后的数据类型

easyui的validatebox重写自定义验证规则的几个实例

validatebox已经实现的几个规则: 验证规则是根据使用需求和验证类型属性来定义的,这些规则已经实现(easyui API): email:匹配E-Mail的正则表达式规则. url:匹配URL的正则表达式规则. length[0,100]:允许在x到x之间个字符. remote['http://.../action.do','paramName']:发送ajax请求需要验证的值,当成功时返回true. 拓展:自定义验证规则 自定义验证规则,需要重写$.fn.validatebox.def

表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等.当提交表单时,调用 'validate' 方法来检查表单是否有效. 用法 创建一个简单的 HTML 表单.构建表单并给 id.action.method 赋值. <form id="ff" method="post"> <div> <lab

jQuery EasyUI API 中文文档 - ValidateBox验证框

jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下. 用 $.fn.validatebox.defaults 重写了 defaults. 用法 代码如下: <input id="vv" required="true" validType="email"> 代码如下: $('#vv').validatebox({ required:true }); 验证规则 验