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 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
javascript表单验证大全
Aug 12 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
js实现多图左右切换功能
Aug 04 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 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 Cookie的一个使用注意点
2008/11/08 PHP
PHP基础知识回顾
2012/08/16 PHP
深入分析php之面向对象
2013/05/15 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
Vue点击切换颜色的方法
2018/09/13 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
python实现调用其他python脚本的方法
2014/10/05 Python
python库matplotlib绘制坐标图
2019/10/18 Python
python实现大学人员管理系统
2019/10/25 Python
浅析python redis的连接及相关操作
2019/11/07 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
教师工作失职检讨书
2014/09/18 职场文书
支教个人总结
2015/03/04 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
python缺失值填充方法示例代码
2022/12/24 Python