基本正则表达式的运用【前端】

简介: 基本正则表达式的运用【前端】

关于正则表达式一直都是个让很多程序员都觉得很郁闷的一个东西,我觉得创造正则表达式的那个家伙简直就是个奇葩,要不就是外星人。就那么一个字符规则校验就足以使那么多程序员为之抓狂,你可以想象这个东西该有多变态。由于本人水平有限,不可能写的那么全面,只是把比较实用的东西给写下来,还有对一些常用的正则表达式进行收集整理,如果有写的不对的地方,还希望各路大牛多多指教!代码真的很详细,句句有解释


正则表达式简介:


正则表达式是由一些具有特殊含义的字符组成的字符串,多用于查找、替换符合规则的字符串。在表单验证、Url映射等处都会经常用到。

废话不多说,开始进入正题。

下面是没有任何css样式和js文件的正则表达式,很简单,可以直接用,下面是效果图


代码如下


<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>正则验证</title>
  <style type="text/css">
    span{
    color: red;
    font-size: 14px;
    }
  </style>
  <script type="text/javascript">
    function $(sid){
    return document.getElementById(sid);
    }
    //做最终的验证
    function myf(){
    var a = vName();
    var b = vPwd();
    if(a==false&&b==false){
      return false;
    }
    return true;
    }
    function vName(){
    var name = $("sname").value;//拿到文本框的值
    var sp = $("sa");//拿到span 
    var reg = /^\w{6,10}$/;//正则模板
    if(!reg.test(name)){//不匹配 shift+end
      sp.innerHTML = "用户名必须是6-10位的合法字符";
      return false;
    }
    else{//匹配上了
      sp.innerHTML = "";
      return true;
    }
    }
    function vPwd(){
    var name = $("spwd").value;//拿到文本框的值
    var sp = $("sb");//拿到span 
    var reg = /^\d{6}$/;//正则模板
    if(!reg.test(name)){//不匹配 shift+end
      sp.innerHTML = "密码必须是6位的数字";
      return false;
    }
    else{//匹配上了
      sp.innerHTML = "";
      return true;
    }
    }
    function vEmail(){//2384jk@sj.com
    var name = $("semail").value;//拿到文本框的值
    var sp = $("sc");//拿到span 
    var reg = /^\w+@\w+\.[a-zA-Z]{2,3}$/;//正则模板
    if(!reg.test(name)){//不匹配 shift+end
      sp.innerHTML = "邮箱格式不正确";
    }
    else{//匹配上了
      sp.innerHTML = "";
    }
    }
    //1-9 10-99 100-149 150
    function vAge(){//1-150
    var name = $("sage").value;//拿到文本框的值
    var sp = $("sd");//拿到span 
    var reg = /^([1-9]|[1-9]\d|1[0-4]\d|150)$/;//正则模板
    if(!reg.test(name)){//不匹配 shift+end
      sp.innerHTML = "年龄必须在1-150之间";
    }
    else{//匹配上了
      sp.innerHTML = "";
    }
    }
    function vZj(){//1-150
    var name = $("szj").value;//拿到文本框的值
    var sp = $("se");//拿到span 
    var reg = /^(\d{3,4}-)?(\d{7,8})(-\d{1,4})?$/;//正则模板
    if(!reg.test(name)){//不匹配 shift+end
      sp.innerHTML = "座机号码格式不正确";
    }
    else{//匹配上了
      sp.innerHTML = "";
    }
    }
    function vPhone(){//1-150
    var name = $("sphone").value;//拿到文本框的值
    var sp = $("sf");//拿到span 
    var reg = /^1[3-9]\d{9}$/;//正则模板
    if(!reg.test(name)){//不匹配 shift+end
      sp.innerHTML = "手机号码格式不正确";
    }
    else{//匹配上了
      sp.innerHTML = "";
    }
    }
    function vSfz(){//1-150
    var name = $("ssfz").value;//拿到文本框的值
    var sp = $("sg");//拿到span 
    var reg = /^(\d{18}|\d{15}|\d{17}X)$/;//正则模板
    if(!reg.test(name)){//不匹配 shift+end
      sp.innerHTML = "身份证格式不正确";
    }
    else{//匹配上了
      sp.innerHTML = "";
    }
    }
  </script>
  </head>
  <body>
  <!-- 
   用户名必须是6-10位的合法字符
   密码必须是6位的数字
   邮箱:@ .
   年龄:1-150
   座机:(区号3,4)-(号码(7,8))-(分机号1,4)
   手机号:1[3-9]9个数字
   身份证:15位或者18位 17位+X
   -->
  <form action="1.html" onsubmit="return myf()">
    用户名:<input type="text" id="sname" onblur="vName()"/><span id="sa"></span><br />
    密码:<input type="text" id="spwd" onblur="vPwd()"/><span id="sb"></span><br />
    邮箱:<input type="text" id="semail" onblur="vEmail()"/><span id="sc"></span><br />
    年龄:<input type="text" id="sage" onblur="vAge()"/><span id="sd"></span><br />
    座机:<input type="text" id="szj" onblur="vZj()"/><span id="se"></span><br />
    手机号:<input type="text" id="sphone" onblur="vPhone()" /><span id="sf"></span><br />
    身份证:<input type="text" id="ssfz" onblur="vSfz()" /><span id="sg"></span><br />
    <input type="submit" value="提交" />
    <input type="reset" value="清空" />
  </form>
  </body>
</html>

感谢!

相关文章
|
7月前
|
前端开发 JavaScript
前端JavaScript入门-day08-正则表达式
前端JavaScript入门-day08-正则表达式
72 0
|
2月前
|
自然语言处理 前端开发 JavaScript
掌握正则表达式:前端开发中的文本处理利器
在前端开发中,处理文本是一项常见的任务。正则表达式提供了一种强大而灵活的方式来匹配、搜索和替换文本。本文将带你深入了解正则表达式的基本概念、语法规则以及在JavaScript中的应用。通过一系列实例,我们将探索如何使用正则表达式来验证表单输入、提取文本信息以及进行复杂的文本替换。无论你是前端新手还是老手,掌握正则表达式都将极大地提升你的文本处理能力。
|
7月前
|
前端开发 JavaScript
前端 js 经典:正则表达式
前端 js 经典:正则表达式
57 2
|
SQL JavaScript 前端开发
正则表达式--QQ微信、优酷前端 邮箱正则表达式验证 Bug
但凡稍微有点资历的程序员,都免不了要写正则表达验证算法。最近见到好几个正则表达式的Bug,抽空写出来 拿邮箱验证来说,网上绝大部分人写的邮箱验证正则表达式代码都不能验证这邮箱
|
前端开发 数据安全/隐私保护
前端常用的正则表达式
前端常用的正则表达式
|
JavaScript 前端开发 数据安全/隐私保护
前端常用的正则表达式大全
前端常用的正则表达式大全
318 0
|
自然语言处理 前端开发 JavaScript
web前端学习(三十八)——JavaScript正则表达式、异常处理的相关设置
web前端学习(三十八)——JavaScript正则表达式、异常处理的相关设置
web前端学习(三十八)——JavaScript正则表达式、异常处理的相关设置
|
前端开发 JavaScript
前端学习:javascript正则表达式及前端组件
前端学习:javascript正则表达式及前端组件
149 0
|
前端开发 JavaScript 索引
前端培训-初级阶段(13) - 正则表达式
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。 该文为前端培训-初级阶段(13、18)的补充内容 (介绍了 ECMAScript 历史,ES6 常用点)。 本文介绍ECMAScript基础知识。 前端培训-初级阶段(13) - ECMAScript (语法、变量、值、类型、运算符、语句) 前端培训-初级阶段(13) - ECMAScript (内置对象、函数) 前端培训-初级阶段(13) - 类、模,继承
122 0
前端培训-初级阶段(13) - 正则表达式
|
前端开发 Android开发 数据安全/隐私保护
Android前端正则表达式(通用)
Android前端正则表达式(通用)
98 0