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 相关文章推荐
js作用域及作用域链概念理解及使用
Apr 15 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
基于zepto.js实现登录界面
Oct 09 Javascript
Vue程序调试的方法
Jun 17 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
JS面试题中深拷贝的实现讲解
May 07 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
You might like
PHP数组操作类实例
2015/07/11 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
document.all还是document.getElementsByName?
2006/07/21 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
德国高性价比网上药店:medpex
2017/07/09 全球购物
化学实验员岗位职责
2013/12/28 职场文书
迟到检讨书500字
2014/02/05 职场文书
幼儿教师培训感言
2014/03/08 职场文书
公司募捐倡议书
2014/05/14 职场文书
个人总结与自我评价
2014/09/18 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
城管个人总结
2015/02/28 职场文书
干部外出学习心得体会
2016/01/18 职场文书
python实现自动化群控的步骤
2021/04/11 Python
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python