前端开发：使用JS正则表达式校验邮箱和手机号的方法

前端开发：使用JS正则表达式校验邮箱和手机号的方法 - 三掌柜的个人空间 - OSCHINA - 中文开源技术交流社区

在前端开发过程中，通过使用JS的正则表达式来校验输入的邮箱或者手机号是否正确，这也是一个非常常见的业务情景需求。尤其是在登录注册场景和有关提交邮箱和手机号相关的时候，一定需要做输入校验，这是正常开发所必须要的处理操作。那么本文就来分享一下关于JS正则表达式来校验输入的邮箱和手机号是否正确的方法。

通过正则表达式可以做很多事情，这里只是简单的来介绍一下通过正则表达式来校验账户信息相关的使用，对正则表达式感兴趣的可以另做详细了解，这里不再一一介绍。

正则表达式(regular expression)又称为规则表达式，描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

构造正则表达式的方法和创建数学表达式的方法一致，是用多种元字符与运算符将小的表达式结合在一起来创建更大的表达式。

正则表达式的组件可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任意组合。正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为"元字符"）组成的文字模式。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。

正则表达式常用符号

正则表达式常用的符号大概不超过10种，最常用的不超过5种，本文只来介绍一下常用的符号，其他未讲到的符号请自行了解查阅。

     1.  /^$/ 是一个通用的格式；

     2.  ^ 匹配输入字符串的开始位置；

     3.  $ 匹配输入字符串的结束位置；

     4.  *  匹配前面的子表达式零次或多次；

     5.  + 匹配前面的子表达式一次或多次；

     6.  ？ 匹配前面的子表达式零次或一次；

     7.  \d  匹配一个数字字符，等价于[0-9]；

     8. ( ) 标记一个子表达式的开始和结束位置；

     9.  . 匹配除换行符 \n 之外的任何单字符；

     10. \ 将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。

正则表达式的使用

1、通过正则表达式校验邮箱

  <div>

         <van-field v-model="information.candidateMailbox" name="邮箱" label="邮箱" placeholder="邮箱" @blur="sendEmail" :rules="[{ required: true, message: '请填写候选人邮箱' }]"/>

   </div>

methods: {

    sendEmail: function () {

      var regEmail =

        /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

      if (

        this.information.candidateMailbox != "" &&

        !regEmail.test(this.information.candidateMailbox)

      ) {

        this.$toast("邮箱格式不正确");

        this.information.candidateMailbox = "";

      }

    },

},

2、通过正则表达式校验手机号

    <div>

                <van-field v-model="information.candidatePhone" name="手机号" label="手机号" placeholder="手机号" @blur="sendPhone" :rules="[{ required: true, message: '请填写候选人手机号' }]"/>

      </div>



methods: {

     sendPhone: function () {

      // var regPhone = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/; //带区号校验

      var regPhone = /^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/; //不带区号校验

      if (

        this.information.candidatePhone != "" &&

        !regPhone.test(this.information.candidatePhone)

      ) {

        this.$toast("邮箱格式不正确");

        this.information.candidatePhone = "";

      }

    },

},

3、通过正则表达式校验身份证号

// 身份证号码为18位，前17位为数字，最后一位是校验位，可能为数字或字符X

idCard: function(){

   var regCard = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

   if(this.information.card != "" &&!regCard.test(this.information.card))

   {

        this.$toast("身份证输入不正确”);

        this.information.candidatePhone = "";

   }

}

4、通过正则表达式校验输入的账号

  //输入的账号规则为：由字母、数字、下划线组成，以字母开头，由4-16位组成。

    userAccount:function(){

        var regAccount = /^[a-zA-z]\w{3,15}$/;

 if(this.information.regAccount != "" &&!regAccount.test(this.information.regAccount)){

this.$toast(“账号输入不正确”);

        this.information.regAccount = "";

    }

上述内容就是关于使用JS正则表达式校验的使用方法的全部内容，正则表达式的内容很多，也很大，由于篇幅有限，只介绍了在前端开发常用的几个正则表达式的使用场景，没有涉及到的内容可以自行了解使用，欢迎学习交流。

以上就是本章的全部内容，欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！