Jquery 表单验证类介绍与实例


Posted in Javascript onJune 09, 2013

[html]

<form action="" method="post" id="formValidate"> 
数值:<input name="" type="text" validate="number" /><span></span><br/> 
浮点型:<input name="" type="text" validate="decimal" /><span></span><br/> 
英文:<input name="" type="text" validate="english" /><span></span><br/> 
大写英文:<input name="" type="text" validate="upper_english" /><span></span><br/> 
小写英文:<input name="" type="text" validate="lower_english" /><span></span><br/> 
邮件格式:<input name="" type="text" validate="email" /><span></span><br/> 
是否包含中文:<input name="" type="text" validate="chinese" /><span></span><br/> 
URL:<input name="" type="text" validate="url" /><span></span><br/> 
电话号码:<input name="" type="text" validate="phone" /><span></span><br/> 
IP地址:<input name="" type="text" validate="ip" /><span></span><br/> 
金额:<input name="" type="text" validate="money" /><span></span><br/> 
数值或者英文或者_:<input name="" type="text" validate="number_letter" /><span></span><br/> 
邮政编码:<input name="" type="text" validate="zip_code" /><span></span><br/> 
可用账号:<input name="" type="text" validate="account" /><span></span><br/> 
QQ:<input name="" type="text" validate="qq" /><span></span><br/> 
身份证:<input name="" type="text" validate="card" /><span></span><br/> 
数值 允许为空:<input name="" type="text" validate="number" empty='yes' /><span></span><br/> 
数值 长度 1-3:<input name="" type="text" validate="number" min=1 max=3 /><span></span><br/> 
数值 长度 1-3 允许为空:<input name="" type="text" validate="number" min=1 max=3 empty='yes'/><span></span><br/> 
<input name="" type="submit" /> 
</form> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="formValidate.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var formValidate = new formValidate(); 
formValidate.init({}); 
</script>

[javascript]
/* 
* 通用JS验证类 
* 使用方法: 
* var formValidate = new formValidate(); 
* formValidate.init({}); 
* 注意: 
* <form action="" method="post" id="formValidate"> 
* id为formValidate 
* 
* <input name="" type="text" validate="zip_code" empty="yes" min=10 max=10 /><span></span> 
* validate="zip_code" 验证是否是邮政编码 
* empty="yes" 验证是否允许为空 
* min=10 最小长度 
* max=10 最大长度 
* <span></span> 显示提示内容 
*/ 
var formValidate = function () { var _this = this; 
this.options = { 
number : {reg : /^[0-9]+$/, str : '必须为数字'}, 
decimal : {reg : /^[-]{0,1}(\d+)[\.]+(\d+)$/ , str : '必须为DECIMAL格式'}, 
english : {reg : /^[A-Za-z]+$/, str : '必须为英文字母'}, 
upper_english : {reg : /^[A-Z]+$/, str : '必须为大写英文字母'}, 
lower_english : {reg : /^[a-z]+$/, str : '必须为小写英文字母'}, 
email : {reg : /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/, str : 'Email格式不正确'}, 
chinese : {reg : /[\u4E00-\u9FA5\uf900-\ufa2d]/ig, str : '必须含有中文'}, 
url : {reg : /^[a-zA-z]+:\/\/[^s]*/, str : 'URL格式不正确'}, 
phone : {reg : /^[1][3][0-9]{9}$/ , str : '电话号码格式不正确'}, 
ip : {reg : /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/ , str : 'IP地址格式不正确'}, 
money : {reg : /^[0-9]+[\.][0-9]{0,3}$/ , str : '金额格式不正确'}, 
number_letter : {reg : /^[0-9a-zA-Z\_]+$/ , str : '只允许输入英文字母、数字、_'}, 
zip_code : {reg : /^[a-zA-Z0-9 ]{3,12}$/ , str : '邮政编码格式不正确'}, 
account : {reg : /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/ , str : '账号名不合法,允许5-16字符,字母下划线和数字'}, 
qq : {reg : /[1-9][0-9]{4,}/ , str : 'QQ账号不正确'}, 
card : {reg : /^(\d{6})(18|19|20)?(\d{2})([01]\d)([0123]\d)(\d{3})(\d|X)?$/ , str : '身份证号码不正确'}, 
}; 
//初始化 绑定表单 选项 
this.init = function (options) { 
this.setOptions(options); 
this.checkForm(); 
}; 
//设置参数 
this.setOptions = function (options) { 
for (var key in options) { 
if (key in this.options) { 
this.options[key] = options[key]; 
} 
} 
}; 
//检测表单 包括是否为空,最大值 最小值,正则验证 
this.checkForm = function () { 
$("#formValidate").submit(function () { 
var formChind = $("#formValidate").children(); 
var testResult = true; 
formChind.each(function (i) { 
var child = formChind.eq(i); 
var value = child.val(); 
var len = value.length; 
var childSpan = child.next(); 
//属性中是否为空的情况 
if (child.attr('empty')) { 
if (child.attr('empty') == 'yes' && value == '') { 
if (childSpan) { 
childSpan.html(''); 
} 
return; 
} 
} 
//属性中min 和 max 最大和最小长度 
var min = null; 
var max = null; 
if (child.attr('min')) min = child.attr('min'); 
if (child.attr('max')) max = child.attr('max'); 
if (min && max) { 
if (len < min || len > max) { 
if (childSpan) { 
childSpan.html(''); 
childSpan.html(' 字符串长度在' + min + '与' + max + '之间'); 
testResult = false; 
return; 
} 
} 
} else if (min) { 
if (len < min) { 
if (childSpan) { 
childSpan.html(''); 
childSpan.html(' 字符串长度应大于' + min); 
testResult = false; 
return; 
} 
} 
} else if (max) { 
if (len > max) { 
if (childSpan) { 
childSpan.html(''); 
childSpan.html(' 字符串长度应小于' + max); 
testResult = false; 
return; 
} 
} 
} 
//正则校验 
if (child.attr('validate')) { 
var type = child.attr('validate'); 
var result = _this.check(value, type); 
if (childSpan) { 
childSpan.html(''); 
if (result != true) { 
childSpan.html(' ' + result); 
testResult = false; 
} 
} 
} 
}); 
return testResult; 
}); 
}; 
//检测单个正则选项 
this.check = function (value, type) { 
if (this.options[type]) { 
var val = this.options[type]['reg']; 
if (!val.test(value)) { 
return this.options[type]['str']; 
} 
return true; 
} else { 
return '找不到该表单验证正则项'; 
} 
}; 

}
Javascript 相关文章推荐
Javascript MD4
Dec 20 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
详谈javascript中的cookie
Jun 03 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
JavaScript实现星级评分
Jan 12 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
js调用后台servlet方法实例
Jun 09 #Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 #Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 #Javascript
ScrollDown的基本操作示例
Jun 09 #Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 #Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 #Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 #Javascript
You might like
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
Javascript模板技术
2007/04/27 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
优秀语文教师事迹
2014/05/18 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
收款授权委托书
2014/10/02 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
中秋节寄语2015
2015/03/24 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python