JQuery EasyUI validate 扩展
validate 扩展js
$.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function(value,param){
return value == $(param[0]).val();
},
message: '两次输入内容不一致'
},
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
},
//手机号码
mobile: {
validator: function(value, param){
return /^0{0,1}1[3,8,5][0-9]{9}$/.test(value);
},
message: "手机号码格式不正确"
},
//身份证
IDCard: {
validator: function(value, param){
return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
},
message: "请输入正确的身份证号码"
},
//比较时间选择器
compareDate: {
validator: function(value, param){
return dateCompare($(param[0]).datebox("getValue"), value);
},
message: "结束日期不能小于开始日期"
},
// 验证是否包含空格和非法字符
unnormal: {
validator: function (value) {
return /^[a-zA-Z0-9]/i.test(value);
},
message: '输入值不能为空和包含其他非法字符'
},
//过滤特殊字符
filterSpecial:{
validator: function(value, param){
//过滤空格
var flag = /\s/.test(value);
//过滤特殊字符串
var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】’‘《》；：”“'。，、？]");
var specialFlag = pattern.test(value);
return !flag && !specialFlag;
},
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: '请输入合法数字'
},
length:{validator:function(value,param){
var len=$.trim(value).length;
return len>=param[0]&&len<=param[1];
},
message:"输入内容长度必须介于{0}和{1}之间."
},
phone : {// 验证电话号码
validator : function(value) {
return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
},
message : '格式不正确,请使用下面格式:020-88888888'
},
intOrFloat : {// 验证整数或小数
validator : function(value) {
return /^\d+(\.\d+)?$/i.test(value);
},
message : '请输入数字，并确保格式正确'
},
qq : {// 验证QQ,从10000开始
validator : function(value) {
return /^[1-9]\d{5,9}$/i.test(value);
},
message : 'QQ号码格式不正确'
},
age : {// 验证年龄
validator : function(value) {
return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);
},
message : '年龄必须是0到120之间的整数'
},
chinese : {// 验证中文
validator : function(value) {
return /^[\Α-\￥]+$/i.test(value);
},
message : '请输入中文'
},
english : {// 验证英语
validator : function(value) {
return /^[A-Za-z]+$/i.test(value);
},
message : '请输入英文'
},
username : {// 验证用户名
validator : function(value) {
return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);
},
message : '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'
},
faxno : {// 验证传真
validator : function(value) {
// return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(value);
return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
},
message : '传真号码不正确'
},
zip : {// 验证邮政编码
validator : function(value) {
return /^[1-9]\d{5}$/i.test(value);
},
message : '邮政编码格式不正确'
},
ip : {// 验证IP地址
validator : function(value) {
return /^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))[.]){3}(([0-1]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/i.test(value);
},
message : 'IP地址格式不正确'
},
name : {// 验证姓名，可以是中文或英文
validator : function(value) {
return /^[\Α-\￥]+$/i.test(value)|/^\w+[\w\s]+\w+$/i.test(value);
},
message : '请输入中文或英文的姓名'
},
date : {// 输入合适的日期格式 yyyy-MM-dd或yyyy-M-d
validator : function(value) {
//格式yyyy-MM-dd或yyyy-M-d
return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value);
},
message : '清输入合适的日期格式'
}
});
/*
* 比较两个日期的大小
* 传入的参数推荐是"yyyy-mm-dd"的格式，其他的日期格式也可以，但要保证一致
*/
var dateCompare = function(date1, date2){
if(date1 && date2){
var a = new Date(date1);
var b = new Date(date2);
return a < b;
}
}
用例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validate On Blur - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.validation.js"></script>
</head>
<body>
<center>
<h2 id="top">Validate</h2>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="常用" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<label for="username" class="label-top">长度范围限制（3-10）</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'length[3,10]',validateOnCreate:false,validateOnBlur:true,err:err">
</div>
<div style="margin-bottom:20px">
<label for="email" class="label-top">Email格式验证</label>
<input id="email" class="easyui-validatebox tb" data-options="required:true,validType:'email',validateOnCreate:false,validateOnBlur:true,tipPosition:'left'">
</div>
<div style="margin-bottom:20px">
<label for="url" class="label-top">Url格式验证</label>
<input id="url" class="easyui-validatebox tb" data-options="required:true,validType:'url',validateOnCreate:false,validateOnBlur:true" tipPosition="right">
</div>
<div style="margin-bottom:20px">
<label for="phone" class="label-top">密码:</label>
<input id="phone" class="easyui-passwordbox" prompt="Password" data-options="required:true,validateOnCreate:false,validateOnBlur:true" tipPosition="top">
</div>
<div style="margin-bottom:20px">
<label for="phone" class="label-top">确认密码:</label>
<input id="rephone" class="easyui-passwordbox" prompt="RePassword" data-options="required:true,validateOnCreate:false,validateOnBlur:true" validType="equals['#phone']" tipPosition="bottom">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">限制最小长度5个字符:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validateOnCreate:false,validateOnBlur:true" validType='minLength[5]'>
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">手机号码:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'mobile',validateOnCreate:false,validateOnBlur:true,err:err">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">身份证号:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'IDCard',validateOnCreate:false,validateOnBlur:true,err:err">
</div>
</div>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="数字" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<label for="username" class="label-top">输入整数:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'checkNum',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">合法数字:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'checkFloat',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">验证电话号码:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'phone',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">验证整数或小数 :</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'intOrFloat',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">验证QQ,从10000开始:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'qq',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">验证年龄:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'age',validateOnCreate:false,validateOnBlur:true">
</div>
</div>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="字符串" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<label for="username" class="label-top">输入内容长度必须介于{0}和{1}之间:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'length[2,4]',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">验证是否包含空格和非法字符:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'unnormal',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">过滤特殊字符:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'filterSpecial',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">验证中文:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'chinese',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">验证英语 :</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'english',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'username',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">验证姓名，可以是中文或英文 :</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'name',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">验证传真 3-4位数字'-'7-8位数字或7-8位数字（519-85125379或85125379）:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'faxno',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">验证邮政编码（非0开头6位数字）:</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'zip',validateOnCreate:false,validateOnBlur:true">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">验证IP地址 :</label>
<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'ip',validateOnCreate:false,validateOnBlur:true">
</div>
</div>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="日期" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<label for="username" class="label-top">输入合适的日期格式 yyyy-MM-dd :</label>
<input id="username" style="width:100%;" class="easyui-datebox tb" data-options="required:true,validType:'date',validateOnCreate:false,validateOnBlur:true,formatter:myformatter,parser:myparser">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">结束日期不能小于开始日期:</label>
<input id="date1" style="width:100%;" class="easyui-datebox tb " data-options="required:true,validateOnCreate:false,validateOnBlur:true,formatter:myformatter,parser:myparser">
</div>
<div style="margin-bottom:20px">
<label for="username" class="label-top">结束日期不能小于开始日期:</label>
<input id="date2" style="width:100%;" class="easyui-datebox tb " data-options="required:true,validateOnCreate:false,validateOnBlur:true,formatter:myformatter,parser:myparser" validType="compareDate['#date1']">
</div>
</div>
<a href="#top"><img src="top.gif" style="position: fixed;right: 30px;bottom: 20px;" width="20" height="30"/></a>
<style scoped="scoped">
.tb{
width:100%;
margin:0;
padding:5px 4px;
border:1px solid #ccc;
box-sizing:border-box;
}
</style>
<!-- 设置错误提示显示在下方 -->
<script type="text/javascript">
function err(target, message){
var t = $(target);
if (t.hasClass('textbox-text')){
t = t.parent();
}
var m = t.next('.error-message');
if (!m.length){
m = $('<div class="error-message"></div>').insertAfter(t);
}
m.html(message);
}
function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
}
function myparser(s){
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
}
</script>
</center>
</body>
</html>
JQuery EasyUI validate 扩展的更多相关文章
- Jquery Easyui验证扩展，Easyui验证，Easyui校验，js正则表达式
Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式 >>>>>>>>>>>>>> ...
- jquery easyui的扩展验证
1.扩展通过$.extends($.fn.validatebox.defaults.rules,)扩展 $.extend( $.fn.validatebox.defaults.rules, { idc ...
- 封装jQuery Validate扩展验证方法
一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...
- [转]jQuery EasyUI 扩展-- 主题（Themes）
主题(Themes)允许您改变站点的外观和感观.使用主题可以节省设计的时间,让您腾出更多的时间进行开发.您也可以创建一个已有主题的子主题. 主题生成器(Theme Builder) jQuery UI ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- jquery validate扩展验证方法
/***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 扩展编辑器
jQuery EasyUI 数据网格 - 扩展编辑器 一些常见的编辑器(editor)添加到数据网格(datagrid),以便用户编辑数据. 所有的编辑器(editor)都定义在 $.fn.datag ...
- 雷林鹏分享：jQuery EasyUI 扩展
jQuery EasyUI 扩展 Portal(制作图表.列表.球形图等) 数据网格视图(DataGrid View) 可编辑的数据网格(Editable DataGrid) 可编辑的树(Editab ...
- easyui validate -- radio、checkbox 校验扩展，事件域名
事件域名: $(dom).on('click.myNameSpace',function(){ ... }),其中‘.myNameSpace’便是域名: 目前作用:$(dom).off('click. ...
随机推荐
- IE浏览器的判断
function compatibleIE8(){ var browser = navigator.appName; var b_version = navigator.appVersion; if( ...
- iOS怎样获取任何App的资源图片？
1.打开iTunes,并与手机相连接 2.按照下图所示执行搜索并下载App 3.到Mac的 /Users/apple/Music/iTunes/iTunes Media/Mobile Applicat ...
- mysq'l系列之10.mysql优化&权限控制
网站打开慢如何排查 1.打开网页, 用谷歌浏览器F12, 查看network: 哪个加载时间长就优化哪个 2.如果是数据库问题 2.1 查看大体情况 # top # uptime //load av ...
- Python爬虫-- selenium库
selenium库 selenium 是一套完整的web应用程序测试系统,包含了测试的录制(selenium IDE),编写及运行(Selenium Remote Control)和测试的并行处理(S ...
- 【题解】CJOI2019 登峰造鸡境 (Prufer序列+斯特林数)
[题解]CJOI2019 登峰造鸡境 (Prufer序列+斯特林数) 题目背景 舒服了. 题目描述 你有一颗n个点的无根树,每个点有有一个标号(1~n). 现在你知道,总共有m个叶子节点,求不同的树的 ...
- linux c编程：文件的操作
在Linux系统中,系统是通过inode来获得这个文件的信息.在Linux系统中,inode的信息都是封装在stat这个结构体中.可以通过man 2 stat来查看stat的具体结构.从中可以看到包含 ...
- JavaScript:学习笔记(4)——This关键字
JavaScript:学习笔记(4)——This关键字 以前这篇帖子是关于闭包的,但是我想弄明白的其实是This关键字.JavaScript的this和Java等面向对象语言中的this大不一样,bi ...
- 系统常用VC++运行时下载地址
Microsoft Visual C++ 2005 Microsoft Visual C++ 2005 Redistributable Package (x86) https://www.micro ...
- RQNOJ 342 最不听话的机器人：网格dp
题目链接:https://www.rqnoj.cn/problem/342 题意: DD 有一个不太听话的机器人,这个机器人总是会有自己的想法,而不会完全遵守 DD 给它的指令. 现在 DD 在试图命 ...
- 通过阿里云域名动态解析 IP 地址
这两天在家里用树莓派折腾了一个家用服务器,主要用来做 mac 的 Time Machine ,还有就是当做下载机和 nas ,想着平时上班时间家里没人用网络,空着也是空着,就可以利用空闲带宽下个美剧啥 ...