js正则校验身份证姓名和身份证号码

一、页面代码：

<template>

<div class="page-box">

<div style="margin:.4rem;">

          <p class="second-title">请输入身份证上的姓名：</p>

          <van-field v-model="card-name" clearable ref="cardName"></van-field>

  </div>

  <div style="margin:.4rem;">

          <p class="second-title">请输入本人身份证号：</p>

          <van-field v-model="card-number" clearable ref="cardNumber" maxlength="18"></van-field>

   </div>

</div>

</template>

二、js代码：

<script>

  export default {

    data() {

      return {

        cardName:'',

        cardNumber:''

      };

    },

    methods: {

        //提交前的数据校验

        valid() {

        let that=this

        var regIdName = /^(([a-zA-Z+\.?\·?a-zA-Z+\s]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/;   // 包括新疆身份证姓名含·并且英文支持空格

        if(!regIdName.test(that.cardName)){

          that.$toast({

            message: '请输入正确的姓名',

            duration: 2000

          });

          that.$refs.cardName.focus();

          return false;  

        } 

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

        if(!regIdNo.test(that.cardNumber)){

          that.$toast({

            message: '身份证号填写错误',

            duration: 2000

          });

          that.$refs.cardNumber.focus();

          return false;  

        } 

        return true

      }

      }

    }

  };

</script>

三、样式设置：

<style lang="scss" scoped>

.page-box {

        width: 100%;

        display: flex;

        flex-direction: column;

        .second-title {

                font-size: 0.14rem;

        }

        .card-name {

                font-size: 0.14rem;

                width: 3.5rem;

        }

        .card-number {

                font-size: 0.14rem;

                width: 3.5rem;

        }

}

<style>