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 相关文章推荐
lib.utf.js
Aug 21 Javascript
javascript 打印页面代码
Mar 24 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
关于element的表单组件整理笔记
Feb 05 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
php数组键名技巧小结
2015/02/17 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
python中的reduce内建函数使用方法指南
2014/08/31 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
基于Python的OCR实现示例
2020/04/03 Python
关于Python解包知识点总结
2020/05/05 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
小结Python的反射机制
2020/09/28 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
大学生职业生涯规划书前言
2014/01/09 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
大班亲子运动会方案
2014/06/10 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
学校通报表扬范文
2015/05/04 职场文书
好人好事新闻稿
2015/07/17 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL