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

表单验证正则表达式实例代码详解

Posted in Javascript onNovember 09, 2015

表单验证正则表达式具体内容如下所示：

表单验证正则表达式实例代码详解

首先给大家解释一些符号相关的意义

     1.  /^$/ 这个是个通用的格式。

         ^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置

     2. 里面输入需要实现的功能。

        * 匹配前面的子表达式零次或多次；
       + 匹配前面的子表达式一次或多次；
       ？匹配前面的子表达式零次或一次；
       \d  匹配一个数字字符，等价于[0-9]

下面通过一段代码给大家分析表单验证正则表达式，具体代码如下：

<!DOCTYPE html>
 <html lang="en">
  <head>
   <meta charset="UTF-">
   <title>正则验证常用表单方法</title>
   <script type="text/javascript">
    function focus_username() {
     var resultObj=document.getElementById('result_username');
     resultObj.innerHTML="以字母开头的-位的字符";
     resultObj.style.color="blue";
     document.form.username.style="border:px solid red";
    } 
   // function blur_username () {
    //第一种方法：
   //  var resultObj=document.getElementById('result_username') 
    // if (document.form.username.value=='') {
  //    resultObj.innerHTML="用户名不能为空";
  //    resultObj.style.color="red";
  //    return false;
    //  }else if (document.form.username.value.length<||document.form.username.value.length>) {
    //    resultObj.innerHTML="用户名字符长度必须介于到个之间";
    //    resultObj.style.color="red";
    //    return false;
    //   }else{
    //    resultObj.innerHTML="ok";
    //    resultObj.style.color="green";
    //   }
    // }
    function blur_username () {
      //第二种方法：
     var resultObj=document.getElementById('result_username') 
     var pre=document.form.username.value;
     var reg=/^[a-zA-Z]\w{,}$/;
     if (pre=='') {
       resultObj.innerHTML="(必填项)用户名不能为空";
       resultObj.style.color="red";
       return false;
     }else if (!reg.test(pre)) {
       resultObj.innerHTML="用户名字符输入不合法";
       resultObj.style.color="red";
       return false;
     }else{
       resultObj.innerHTML="ok";
       resultObj.style.color="green";
       return true;
     }
    }
   function focus_userpwd() {
    var resultObj=document.getElementById('result_userpwd');
    resultObj.innerHTML="(必填项)介于-位的非特殊字符";
    resultObj.style.color="blue";
    document.form.userpwd.style="border:px solid red";
   } 
   // function blur_userpwd () {
   //  var resultObj=document.getElementById('result_userpwd') 
    // if (document.form.userpwd.value=='') {
  //    resultObj.innerHTML="用户名密码不能为空";
  //    resultObj.style.color="red";
  //    return false;
    //  }else if (document.form.userpwd.value.length<||document.form.userpwd.value.length>) {
    //    resultObj.innerHTML="用户名密码字符长度必须介于到个之间";
    //    resultObj.style.color="red";
    //    return false;
    //   }else{
    //    resultObj.innerHTML="ok";
    //    resultObj.style.color="green";
    //    return true;
    //   }
    // }
    function blur_userpwd () {    
    var resultObj=document.getElementById('result_userpwd') 
     var pre=document.form.userpwd.value;
     var reg=/^\w{,}$/;
    if (pre=='') {
      resultObj.innerHTML="(必填项)用户名密码不能为空";
      resultObj.style.color="red";
      return false;
     }else if (!reg.test(pre)) {
       resultObj.innerHTML="用户名密码字符输入不合法";
       resultObj.style.color="red";
       return false;
      }else{
       resultObj.innerHTML="ok";
       resultObj.style.color="green";
       return true;
      }
    }
    function focus_userpwd() {
    var resultObj=document.getElementById('result_userpwd');
    resultObj.innerHTML="(必填项)介于-位的非特殊字符";
    resultObj.style.color="blue";
    document.form.userpwd.style="border:px solid red";
   } 
   // function blur_userpwd () {
   //  var resultObj=document.getElementById('result_userpwd') 
    // if (document.form.userpwd.value=='') {
  //    resultObj.innerHTML="用户名密码不能为空";
  //    resultObj.style.color="red";
  //    return false;
    //  }else if (document.form.userpwd.value!=document.form.userpwd.value) {
    //    resultObj.innerHTML="两次用户名密码输入不一致";
    //    resultObj.style.color="red";
    //    return false;
    //   }else{
    //    resultObj.innerHTML="ok";
    //    resultObj.style.color="green";
    //    return true;
    //   }
    // } 
    function blur_userpwd () {
     var resultObj=document.getElementById('result_userpwd') 
      var pre=document.form.userpwd.value;
      var reg=/^\w{,}$/;
     if (pre=='') {
       resultObj.innerHTML="(必填项)用户名密码不能为空";
       resultObj.style.color="red";
       return false;
      }else if (!reg.test(pre)) {
        resultObj.innerHTML="用户名密码字符输入不合法";
        resultObj.style.color="red";
        return false;
       }else if(document.form.userpwd.value!=document.form.userpwd.value){
        resultObj.innerHTML="两次用户名密码输入不一致";
        resultObj.style.color="red";
        return false;
       }else {resultObj.innerHTML="ok";
        resultObj.style.color="green";
        return true;
       }        
    }
    function focus_Mobile() {
     var resultObj=document.getElementById('result_Mobile');
     resultObj.innerHTML="请输入你位数的手机号码";
     resultObj.style.color="blue";
     document.form.Mobile.style="border:px solid red";
    } 
    function blur_Mobile() {    
     var resultObj=document.getElementById('result_Mobile') 
     var pre=document.form.Mobile.value;
     var reg=/^[||][-]{}$/;
     if (pre=='') {
       resultObj.innerHTML="手机号码不能为空";
       resultObj.style.color="red";      
     }else if (!reg.test(pre)) {
       resultObj.innerHTML="手机号码字符输入不合法";
       resultObj.style.color="red";      
     }else {
      resultObj.innerHTML="ok";
      resultObj.style.color="green";      
     }        
    }
    function focus_Tel() {
     var resultObj=document.getElementById('result_Tel');
     resultObj.innerHTML="请输入你的座机号码";
     resultObj.style.color="blue";
     document.form.Tel.style="border:px solid red";
    } 
    function blur_Tel() {    
     var resultObj=document.getElementById('result_Tel') 
     var pre=document.form.Tel.value;
     var reg=/^{}[-]{,}\-[]?[-]{}$/;
     if (pre=='') {
       resultObj.innerHTML="座机号码不能为空";
       resultObj.style.color="red";
     }else if (!reg.test(pre)) {
       resultObj.innerHTML="座机号码字符输入不合法";
       resultObj.style.color="red";
     }else {
      resultObj.innerHTML="ok";
      resultObj.style.color="green";      
     }        
    }
    function focus_mail() {
     var resultObj=document.getElementById('result_mail');
     resultObj.innerHTML="请输入你的邮箱号码";
     resultObj.style.color="blue";
     document.form.mail.style="border:px solid red";
    } 
    function blur_mail() {    
     var resultObj=document.getElementById('result_mail');
     var pre=document.form.mail.value;
     var reg=/^[a-zA-Z-][a-zA-Z-\._]+@[a-z-]+\.(com)(\.(cn))?$/;
     if (pre=='') {
       resultObj.innerHTML="邮箱号码不能为空";
       resultObj.style.color="red";
     }else if (!reg.test(pre)) {
       resultObj.innerHTML="邮箱号码字符输入不合法";
       resultObj.style.color="red";
     }else {
      resultObj.innerHTML="ok";
      resultObj.style.color="green";
     }        
    }
    function focus_ID() {
     var resultObj=document.getElementById('result_ID');
     resultObj.innerHTML="(必填项)请输入你位的二代身份证号码";
     resultObj.style.color="blue";
     document.form.ID.style="border:px solid red";
    } 
    function blur_ID() {    
     var resultObj=document.getElementById('result_ID');
     var pre=document.form.ID.value;
     var reg=/^[-]{}[-x]$/;
     if (pre=='') {
       resultObj.innerHTML="(必填项)二代身份证号码字符不能为空";
       resultObj.style.color="red";
       return false;
     }else if (!reg.test(pre)) {
       resultObj.innerHTML="二代身份证号码字符输入不合法";
       resultObj.style.color="red";
       return false;
     }else {
      resultObj.innerHTML="ok";
      resultObj.style.color="green";
      return true;
     }        
    }
    function checkForm(){
     var flag_username=blur_username();
     var flag_userpwd=blur_userpwd();
     var flag_userpwd=blur_userpwd();
     var flag_ID=blur_ID();      
     if (flag_username==true&&flag_userpwd==true&&flag_userpwd==true&&flag_ID==true) {     
      return true;
     }else{
      return false;
     }    
    }
   </script>
   <style type="text/css">
   body{background-image: url(images/.jpg);background-size: cover;}
   table{margin-left: px;margin-top: px;background-image: url(images/.jpg);background-size: cover;box-shadow: px px px #C}
   .vip{font-size: px;}
   </style>
  </head>
  <body>
  <form name="form" action=".php" method="post" onsubmit="return checkForm()">
   <table width="px" border="px" bordercolor="red" cellpadding="px" cellspacing="px" align="center" >
    <tr>
     <th colspan="" class="vip">VIP会员注册</th>
    </tr>
    <tr>
     <td width="px" align="right" >用户名：</td>
     <td width="px"><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" ></td>
     <td><div width="px" id="result_username"></div></td>
    </tr>
    <tr>
     <td align="right">密码：</td>
     <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()" /></td>
     <td><div id="result_userpwd"></div></td>
    </tr>
    <tr>
     <td align="right">确认密码：</td>
     <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"/></td>
     <td><div id="result_userpwd"></div></td>
    </tr>
    <tr>
     <td align="right">手机号码：</td>
     <td><input type="text" name="Mobile" onfocus="focus_Mobile()" onblur="blur_Mobile()"/></td>
     <td><div id="result_Mobile"></div></td>
    </tr>
    <tr>
     <td align="right">座机号码：</td>
     <td><input type="text" name="Tel" onfocus="focus_Tel()" onblur="blur_Tel()"/></td>
     <td><div id="result_Tel"></div></td>
    </tr>
    <tr>
     <td align="right">邮箱号码：</td>
     <td><input type="text" name="mail" onfocus="focus_mail()" onblur="blur_mail()"/></td>
     <td><div id="result_mail"></div></td>
    </tr>
    <tr>
     <td align="right">二代身份证：</td>
     <td><input type="text" name="ID" onfocus="focus_ID()" onblur="blur_ID()"/></td>
     <td><div id="result_ID"></div></td>
    </tr>
    <tr>
     <td align="center" colspan=""><input type="submit" value="提交注册" />
     <input type="reset" value="重置资料" /></td>
     <td></td>
    </tr>
   </table>
  </form>  
  </body>
 </html>

以上内容就是本文给大家介绍表单验证正则表达式实例代码详解的全部叙述，希望大家喜欢。

表单验证正则表达式实例代码详解

- Author -

七秒钟记忆~

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

Javascript 相关文章推荐
锋利的jQuery 要点归纳（一） jQuery选择器
Mar 21 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
vue-router 学习快速入门
Mar 01 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
JS实现网页上随机产生超链接地址的方法
Nov 09 #Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 #Javascript
window.location.hash知识汇总
Nov 09 #Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 #Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 #Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 #Javascript
初步了解javascript面向对象
Nov 09 #Javascript
代理(2) 选择器(1) 增删查改(1) #{}(1) 脏读(2) canvas(2) SQL注入(2) 外键(1) 克隆(1) IC-R9500(1)
You might like
用PHP开发GUI
2006/10/09 PHP
php checkbox 取值详细说明
2010/08/19 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
Python的面向对象思想分析
2015/01/14 Python
python处理大数字的方法
2015/05/27 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行？
2019/05/15 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python对一个数向上取整的实例方法
2020/06/18 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
劳资人员岗位职责
2013/12/19 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
Elasticsearch 索引操作和增删改查
2022/04/19 Python