首页
所有分类
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 相关文章推荐
理解Javascript_08_函数对象
Oct 15 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
jQuery实现评论模块
Aug 19 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
ip连接(1) T-SQL(1) GTID(1) ECharts(3) 游标(1) 表变量(1) timestamp(1) 排序失效(1) 临时表(1) 重复数据(2)
You might like
PHP中的reflection反射机制测试例子
2014/08/05 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
微信小程序商城项目之淘宝分类入口（2）
2017/04/17 Javascript
深入理解React高阶组件
2017/09/28 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
汉森冲浪板：Hansen Surfboards
2018/05/19 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
C#面试问题
2016/07/29 面试题
抽象类和接口的区别
2012/09/19 面试题
学生干部培训方案
2014/06/12 职场文书
社区好人好事材料
2014/12/26 职场文书
工会文体活动总结
2015/05/07 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
vue特效之翻牌动画
2022/04/20 Vue.js