首页
所有分类
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操作复选框checkbox的方法汇总
Feb 05 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
javascript 实现文本使用省略号替代（超出固定高度的情况）
Feb 21 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
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
appdata(1) mysqldump(1) protocol(1) ACID(1) Windows server 2003(1) Outlook(1) minio(1) 黑屏(2) sentinel(1) sock(2)
You might like
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
php后门URL的防范
2013/11/12 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
PHP实现的购物车类实例
2015/06/17 PHP
php批量修改表结构实例
2017/05/24 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
python中split方法用法分析
2015/04/17 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Django nginx配置实现过程详解
2020/09/10 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
学会迭代器设计模式，帮你大幅提升python性能
2021/01/03 Python
Debenhams百货英国官方网站：Debenhams UK
2016/07/12 全球购物
经济学博士求职自荐信范文
2013/11/23 职场文书
五年级音乐教学反思
2014/02/06 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
工程项目经理任命书
2014/06/05 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
导游词之天津盘山
2019/11/01 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python