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 相关文章推荐
window.onload追加函数使用示例
Mar 03 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
基于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
十天学会php之第一天
2006/10/09 PHP
PHP脚本的10个技巧(4)
2006/10/09 PHP
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
py中的目录与文件判别代码
2008/07/16 Python
Python的词法分析与语法分析
2013/05/18 Python
python机器学习之决策树分类详解
2017/12/20 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python通过字典映射函数实现switch
2020/11/06 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
《木笛》教学反思
2014/03/01 职场文书
2014年高考决心书
2014/03/11 职场文书
大学毕业寄语大全
2014/04/10 职场文书
小学生手册家长评语
2014/04/16 职场文书
客户答谢会活动方案
2014/08/31 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
女性健康讲座主持词
2015/07/04 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
销售口号霸气押韵
2015/12/24 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python