jquery+正则实现统一的表单验证


Posted in Javascript onSeptember 20, 2015

表单验证一直很繁琐,特别是大点的表单,如果每个input都去单独写验证简直要写死人,最近写了一小段js统一的验证表单内容是否正确。

使用这段代码就不再需要对每个input写格式判断,只需要将正确格式的正则表达式写在datatype里就可以了,提交表单按钮也只需要绑定checkForm函数就可以了。

大家有什么建议可以评论一下

<input type="text" datatype=“正则”/>

//表单验证
//点击下一步事件
function checkForm(form){
var success = true;
$("."+form+" input").each(function(){
var $that = $(this);
var dataType = eval($that.attr("dataType"));
if(dataType!=undefined){
if($that.val().match(dataType)){
$that.removeClass("borderRed");
}else{
$that.focus();
$that.addClass("borderRed");
success = false;
return false;
}
}
})
return success;
}

//给每个带有datatype属性的标签绑定blur focus事件

$(document).on("blur","input",function(){
var $that = $(this);
var dataType = eval($that.attr("dataType"));
if(dataType!=undefined){
if($that.val().match(dataType)){
$that.removeClass("borderRed");
}else{
$that.addClass("borderRed");
}
}
})
$(document).on("focus","input",function(){
$(this).removeClass("borderRed");
});

以上内容给大家分享了jquery+正则实现统一的表单验证,希望大家喜欢。

Javascript 相关文章推荐
jQuery基础框架浅入剖析
Dec 27 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
基于JavaScript实现生成名片、链接等二维码
Sep 20 #Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 #Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 #Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 #Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 #Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 #Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 #Javascript
You might like
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
8个必备的PHP功能开发
2015/10/02 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
Python中的is和id用法分析
2015/01/26 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
Ibatis如何调用存储过程
2015/05/15 面试题
最新奶茶店创业计划书
2014/01/25 职场文书
工程售后服务承诺书
2014/05/21 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
小学推普周活动总结
2015/05/07 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
欠条样本
2015/07/03 职场文书
寒假致家长的一封信
2015/10/10 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL