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 相关文章推荐
javascript 写的一个简单的timer
Jul 30 Javascript
js 学习笔记(三)
Dec 29 Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
Vue中使用canvas方法总结
Feb 12 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扩展imagick
2014/06/02 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
JavaScript实现联动菜单特效
2020/01/07 Javascript
python版本的读写锁操作方法
2016/04/25 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
Python运行DLL文件的方法
2020/01/17 Python
Keras实现DenseNet结构操作
2020/07/06 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
霸王洗发水广告词
2014/03/14 职场文书
市场调查策划方案
2014/06/10 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
html5表单的required属性使用
2021/07/07 HTML / CSS