首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript使用简单正则表达式的数据验证功能示例

Posted in Javascript onJanuary 13, 2017

本文实例讲述了JavaScript使用简单正则表达式的数据验证功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Register-reg</title>
  <script type="text/javascript" language="javascript">
    function checkName() {
      var nameElement = document.getElementById("name");
      //var regExp = /^(a-z)[^a-z\d_]/i;
      var regExp = /[a-zA-Z\d_]/i; // \w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。 
      var regExp2 = /^[A-Za-z]/i;//匹配字符串开始位置为字母
      var resultElement = document.getElementById("resName");
      if (nameElement.value.match(regExp) && nameElement.value.match(regExp2) && nameElement.value.length >= 6) {
        //匹配成功
        //会员名为字母、数字、下划线组成，并且字母为开头，长度不小于6
        resultElement.innerHTML = "";
        return true;
      }
      else {
        resultElement.innerHTML = "会员名为字母、数字、下划线组成，并且字母为开头，长度不小于6！";
        return false;
      }
    }
    function checkPwd() {
      var pwdElement = document.getElementById("pwd");
      var regExp = /[a-zA-Z\d_]/i; // \w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。 
      var regExp2 = /[a-zA-Z]/i; //匹配字母
      var regExp3 = /\d/i; //匹配数字
      var resultElement = document.getElementById("resPwd");
      if (pwdElement.value.match(regExp) && pwdElement.value.match(regExp2) && pwdElement.value.match(regExp3) && pwdElement.value.length >= 6) {
        //匹配成功
        //密码为字母、数字、下划线组成，并且必须有字母、数字，长度不小于6
        resultElement.innerHTML = "";
        return true;
      }
      else {
        resultElement.innerHTML = "密码为字母、数字、下划线组成，并且必须有字母、数字，长度不小于6！";
        return false;
      }
    }
    function checkPwd2() {
      var pwdElement = document.getElementById("pwd");
      var pwd2Element = document.getElementById("pwd2");
      var resultElement = document.getElementById("resPwd2");
      if (pwdElement.value == pwd2Element.value) {
        //重输密码与之前密码完全匹配
        resultElement.innerHTML = "";
        return true;
      }
      else {
        resultElement.innerHTML = "密码不一致！";
        return false;
      }
    }
    function checkGentle() {
      var gentleElement = document.getElementById("gentle");
      var resultElement = document.getElementById("resGentle");
      if ((gentleElement.value == "男" || gentleElement.value == "女") || (gentleElement.value == "m" || gentleElement.value == "f") || (gentleElement.value == "male" || gentleElement.value == "famale")) {
        //性别判断是否在：男、女、male、famale、m、f 之内
        resultElement.innerHTML = "";
        return true;
      }
      else {
        resultElement.innerHTML = "性别判断是否在：男、女、male、famale、m、f 之内！";
        return false;
      }
    }
    function checkAge() {
      var ageElement = document.getElementById("age");
      var resultElement = document.getElementById("resAge");
      if (parseInt(ageElement.value) > 0 && parseInt(ageElement.value) <= 150) {
        //如果年龄在0~150之间
        resultElement.innerHTML = "";
        return true;
      }
      else {
        resultElement.innerHTML = "年龄在0~150之间！";
        return false;
      }
    }
    function checkMail() {
      var mailElement = document.getElementById("mail");
      var regExp = /[^a-z0-9_]/gi; // 匹配非字母、数字、下划线的字符
      var regExp2 = /[a-z]/gi; // 匹配字母
      var resultElement = document.getElementById("resMail");
      if (!mailElement.value.match(regExp)) {//如果出现非字母、数字、下划线的字符
        resultElement.innerHTML = "邮箱地址不正确！";
        return false;
      }
      else {
        if (mailElement.value.indexOf(".") - mailElement.value.indexOf("@") >= 2) {
          resultElement.innerHTML = "";
          return true;
        }
        else {
          resultElement.innerHTML = "邮箱地址不正确！";
          return false;
        }
      }
    }
    function checkTel() {
      var telElement = document.getElementById("tel");
      var regExp = /\d{7,12}/g;// 匹配7~12位电话数字
      var regExp2 = /[^0-9]/g; // 是否有数字以外的字符
      var resultElement = document.getElementById("resTel");
      if (telElement.value.match(regExp) && telElement.value.length <= 12) {
        if (telElement.value.match(regExp2)) {
          resultElement.innerHTML = "电话号码为纯数字，且位于7~12位之间！";
          return false;
        }
        else {
          resultElement.innerHTML = "";
          return true;
        }
      }
      else {
        resultElement.innerHTML = "电话号码为纯数字，且位于7~12位之间！"; //!telElement.value.match(regExp2) && 
        return false;
      }
    }
    function checkAll() {
      if (checkName() && checkPwd() && checkPwd2() && checkGentle() && checkAge() && checkMail() && checkTel()) {
        alert("恭喜,填写的信息正确！");
      }
      else {
        alert("错误,请确认填写的信息是否正确！");
      }
    }
    //当窗体加载完成时执行
    window.onload = function () {
      var inputElements = document.getElementsByTagName("input");
      inputElements[0].onblur = function () {
        checkName();
      }
      inputElements[1].onblur = function () {
        checkPwd();
      }
      inputElements[2].onblur = function () {
        checkPwd2();
      }
      inputElements[3].onblur = function () {
        checkGentle();
      }
      inputElements[4].onblur = function () {
        checkAge();
      }
      inputElements[5].onblur = function () {
        checkMail();
      }
      inputElements[6].onblur = function () {
        checkTel();
      }
      inputElements[7].onclick = function () {
        checkAll();
      }
    }
  </script>
  <style type="text/css">
    body{ font-size:16px;
       font-weight:600;
       font-family:微软雅黑;
       line-height:30px;
    }
    thead{ text-align:center;
    }
    input{ width:150px;
    }
    input[type=button]{ height:38px;
              font-size:20px;
              font-weight:600;
    }
    ul{ border:1px solid #c3c3c3;
    }
    li{ list-style-type:square;
    }
  </style>
</head>
<body>
  <form action="" method="post">
    <table>
      <thead><tr><td colspan="2"><h2>表单验证</h2></td></tr></thead>
      <tr><td>会员名：</td><td><input type="text" id="name" /></td><td id="resName"></td></tr>
      <tr><td>密码：</td><td><input type="password" id="pwd" /></td><td id="resPwd"></td></tr>
      <tr><td>重复密码：</td><td><input type="password" id="pwd2" /></td><td id="resPwd2"></td></tr>
      <tr><td>性别：</td><td><input type="text" id="gentle" /></td><td id="resGentle"></td></tr>
      <tr><td>年龄：</td><td><input type="text" id="age" /></td><td id="resAge"></td></tr>
      <tr><td>电子邮件：</td><td><input type="text" id="mail" /></td><td id="resMail"></td></tr>
      <tr><td>联系号码：</td><td><input type="text" id="tel" /></td><td id="resTel"></td></tr>
      <tr><td></td><td><input type="button" value="注册" id="checkAll" /></td></tr>
    </table>
  </form>
  <ul>
    <li>会员名为字母、数字、下划线组成，并且字母为开头，长度不小于6</li>
    <li>密码为字母、数字、下划线组成，并且必须有字母、数字，长度不小于6</li>
    <li>性别判断是否在：男、女、male、famale、m、f 之内</li>
    <li>年龄在0~150之间</li>
    <li>邮箱地址</li>
    <li>电话号码为纯数字，且位于7~12位之间！</li>
  </ul>
</body>
</html>

JavaScript使用简单正则表达式的数据验证功能示例

- Author -

lx_3278@126

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
微信小程序 自动登陆PHP源码实例（源码下载）
May 08 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
bootstrap网格系统使用方法解析
Jan 13 #Javascript
js 判断数据类型的几种方法
Jan 13 #Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 #Javascript
BootStrap表单验证实例代码
Jan 13 #Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 #Javascript
bootstrap滚动监控器使用方法解析
Jan 13 #Javascript
微信小程序 页面之间传参实例详解
Jan 13 #Javascript
frg-100(1) 74HC4066(1) YB-230(1) AN-LP1(1) YAESU(1) ICF-903L(1) BCLer(1) 239军机(1) 根德5570(1) DE1103(2)
You might like
php实现在线通讯录功能（附源码）
2016/05/13 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
python提取字典key列表的方法
2015/07/11 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
pytorch中图像的数据格式实例
2020/02/11 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
香港万宁官方海外旗舰店：香港健与美连锁店
2018/09/27 全球购物
Under Armour安德玛德国官网：美国高端运动科技品牌
2019/03/09 全球购物
OnePlus加拿大官网：中国国际化手机品牌
2020/10/13 全球购物
写好自荐信的几个要点
2013/12/26 职场文书
公司口号大全
2014/06/11 职场文书
文明寝室标语
2014/06/13 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
考试作弊检讨
2015/01/27 职场文书
2016党校培训心得体会
2016/01/07 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android