js正则表达式验证表单【完整版】
更新时间：2017年03月06日 10:49:02 作者：chang红达
本篇文章主要介绍了js正则表达式验证表单的实例，具有很好的参考价值。下面跟着小编一起来看下吧
效果图：
图（1）初始图
图（2）填入信息校验
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完整验证表单</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style:none;}
body{background:#ccc;}
.demo{width:400px;padding:40px;background:#efefef;border:solid 1px #666;margin:100px auto 0;line-height:40px;}
label{display:inline-block;width:20%;}
input{width:60%;}
</style>
</head>
<body>
<div class="demo">
<ul>
<li>
<label for="iptqq">Q Q：</label>
<input type="text" id="iptqq">
<span></span>
</li>
<li>
<label for="iptPhone">手机：</label>
<input type="text" id="iptPhone">
<span></span>
</li>
<li>
<label for="iptEmil">邮箱：</label>
<input type="text" id="iptEmil">
<span></span>
</li>
<li>
<label for="iptNum">座机：</label>
<input type="text" id="iptNum">
<span></span>
</li>
<li>
<label for="iptName">姓名：</label>
<input type="text" id="iptName">
<span></span>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
(function(window){
function $(id){
return document.getElementById(id);
};
// 获取对象
var iptqq = $("iptqq"),iptPhone = $("iptPhone"),iptEmil = $("iptEmil"),iptNum = $("iptNum"),iptName = $("iptName");
// 正则验证表达式
// 验证座机
var rxNum = /^0[0-9]{2,3}-[0-9]{7,8}$/;
// 验证QQ
var rxqq = /^[1-9][0-9]{4,10}$/;
// 验证手机
var rxPhone = /^(13[0-9]|15[012356789]|18[0-9]|17[678]|14[57])[0-9]{8}$/;
// 验证邮箱
var rxEmil = /^\w+@\w+\.\w+$/;
// 验证姓名
var rxName = /^[\u4E00-\u9FA5]{2,}$/
// 验证座机
cation(iptNum,rxNum);
// 验证QQ
cation(iptqq,rxqq);
// 验证手机号
cation(iptPhone,rxPhone);
// 验证邮箱
cation(iptEmil,rxEmil);
// 验证姓名
cation(iptName,rxName);
// 封装验证函数
function cation(element,regExp){
element.onblur = function(){
var txt = this.value;
if( regExp.test( txt ) ){
this.nextElementSibling.innerHTML = "正确"
this.nextElementSibling.style.color = "green";
}else{
this.nextElementSibling.innerHTML = "错误"
this.nextElementSibling.style.color = "red";
}
}
}
})(window)
</script>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
你是否知道JavaScript其实也是一个函数式编程语言呢？本指南将教你如何利用JavaScript的函数式特性。2008-05-05
IE view-source 无法查看看源码 JavaScript看网页源码
查看网页源代码的方法其实有好几种，最常用的我们就是在浏览器中直接选择“查看网页源代码”就可以了，但是在有些时候这种方法却不能见效，以下再介绍几种简单的方法供大家参考！2009-07-07
这篇文章主要介绍了ES6使用新特性Proxy实现的数据绑定功能,结合具体实例形式分析了ES6使用Proxy实现数据绑定具体原理、操作步骤与相关注意事项,需要的朋友可以参考下2020-05-05
前端项目npm install 安装依赖报错的解决方案(三种问题解决方案)
本文给大家介绍前端项目npm install 安装依赖报错的解决方案(三种问题解决方案)，给大家总结了前端项目安装依赖,遇到过的问题,每一种问题给大家完美解决方案,感兴趣的朋友一起看看吧2023-12-12
当关闭系统时会提示:你确定要退出系统吗？退出请按'离开此页'接下来将讲解下IE关闭判断及AJAX注销，感兴趣的你可不要错过了哈，希望本例对你学习ajax有所帮助2013-02-02
Bootstrap每天必学之级联下拉菜单，主要应用场合有省市级关联菜单等，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了WordPress中利用AJAX异步获取评论用户头像的方法,文中的例子是输入邮箱即可获取头像,需要的朋友可以参考下2016-01-01
要检测某一变量是否存在，虽然简单但是也要细心，下面整理了几点，遇到类似问题的朋友可以参考下2013-11-11
这篇文章主要介绍了JavaScript 实现日期时间转时间戳，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
这篇文章主要为大家详细介绍了laypage.js分页插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
最新评论