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 相关文章推荐
js Event对象的5种坐标
Sep 12 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
JS常用排序方法实例代码解析
Mar 03 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
一个简单的MySQL数据浏览器
2006/10/09 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
validator验证控件使用代码
2010/11/23 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
vue v-model的用法解析
2020/10/19 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
老生常谈python之鸭子类和多态
2017/06/13 Python
matplotlib中legend位置调整解析
2017/12/19 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
会计人员岗位职责
2014/03/19 职场文书
2014年冬季防火方案
2014/05/21 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
市级三好学生评语
2014/12/29 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang