js正则表达式验证表单【完整版】


Posted in Javascript onMarch 06, 2017

效果图:

js正则表达式验证表单【完整版】

图(1)初始图

js正则表达式验证表单【完整版】

图(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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 #Javascript
js实现动态显示时间效果
Mar 06 #Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 #Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 #Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 #Javascript
js实现4个方向滚动的球
Mar 06 #Javascript
Bootstrap输入框组件简单实现代码
Mar 06 #Javascript
You might like
第四节--构造函数和析构函数
2006/11/16 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
Jquery中删除元素的实现代码
2011/12/29 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
javascript每日必学之封装
2016/02/23 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
轮播图组件js代码
2016/08/08 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python字符串替换第一个字符串的方法
2019/06/26 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
init进程的作用
2015/08/20 面试题
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
电钳专业个人求职信
2014/01/04 职场文书
拓展培训心得体会
2014/01/04 职场文书
项目建议书格式
2014/03/12 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
金榜题名主持词
2015/07/02 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers