Element ui+Vue中常用表單驗證----手機號、座機、傳真、郵箱、身份證號、數字和帶小數點的數字

情景：最近爲前端form表單提交時需要驗證一下幾種特殊的輸入數據格式進行驗證，在此記錄一下。

一：正則

1.手機號：

const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;//11位手機號

2.座機和傳真：

const reg = /^(\d{3,4}-)?\d{7,8}$/;//座機和傳真格式是一樣的：區號-號碼

3.郵箱：

const reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;

4.身份證號：

 const reg = /^\d{6}(19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
 //18位從1900到2099年中間的範圍驗證

5.數字和帶小數點的數字：

  var reg = /^-?\d{1,4}(?:\.\d{1,2})?$/;//範圍0~9999小數點後1~2位

二：進入正題【注：只貼出來關鍵的部分】

1.form中

<el-form-item label="手機號碼" prop="mobileNumber">
     <el-input v-model="form.mobileNumber" />
</el-form-item>

<el-form-item label="座機號" prop="telPhone">
     <el-input v-model="form.telPhone" />
</el-form-item>

<el-form-item label="傳真" prop="fax">
    <el-input v-model="form.fax" />
</el-form-item>

<el-form-item label="郵箱" prop="email">
    <el-input v-model="form.email" />
</el-form-item>

<el-form-item label="身份證號" prop="cardId">
    <el-input v-model="form.cardId" />
</el-form-item>

<el-form-item label="價格" prop="price">
    <el-input v-model="form.price" />
</el-form-item>

2.data(){}中return{} 中的rules對應form中的prop屬性：

 rules: {
        mobileNumber: [
          { required: true, message: "請輸入手機號碼", trigger: "blur" },
         { validator: isMobileNumber, trigger: "blur" }
        ],
        telPhone: [
          { required: true, message: "請輸入座機號", trigger: "blur" },
          { validator: isTelOrFax, trigger: "blur" }
        ],
        fax: [
          { required: true, message: "請輸入傳真號", trigger: "blur" },
          { validator: isTelOrFax, trigger: "blur" }
        ], 
        email: [
          { required: true, message: "請輸入郵箱", trigger: "blur" },
          { validator: isEmail, trigger: "blur" }
        ], 
        cardId: [
          { required: true, message: "請輸入身份證號", trigger: "blur" },
          { validator: isCardId, trigger: "blur" }
        ],
         price: [
          { required: true, message: "請輸入價格", trigger: "blur" },
          { validator: isPrice, trigger: "blur" }
        ]
  }

3.在data(){}中自定義驗證規則與validator的屬性對應

【1】手機號：

var isMobileNumber= (rule, value, callback) => {
   if (!value) {
        return new Error("請輸入電話號碼");
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        const isPhone = reg.test(value);
        value = Number(value); //轉換爲數字
        if (typeof value === "number" && !isNaN(value)) {//判斷是否爲數字
        value = value.toString(); //轉換成字符串
          if (value.length < 0 || value.length > 12 || !isPhone) { //判斷是否爲11位手機號
            callback(new Error("手機號碼格式如:138xxxx8754"));
          } else {
            callback();
          }
        } else {
          callback(new Error("請輸入電話號碼"));
        }
      }
    };

2.座機和傳真：

var isTelOrFax = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        const reg = /^(\d{3,4}-)?\d{7,8}$/;
        const isTel = reg.test(value);
        if (value.length < 10 || value.length > 13 || !isTel ) {//判斷傳真字符範圍是在10到13
          callback(new Error("座機或傳真格式如:0376-1234567"));
        } else {
          callback();
        }
      }
 };

3.郵箱：

var isEmail = (rule, value, callback) => {
      if (!value) {
        callback(); 
      } else {
        const reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
        const email = reg.test(value);
        if (!email) {
          callback(new Error("郵箱格式如:[email protected]"));
        } else {
          callback();
        }
      }
};

4.身份證號：

 var isCardId = (rule, value, callback) => {
      if (!value) {
        return new Error("請輸入身份證號)"); 
      } else {
        const reg = /^\d{6}(19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
        const card = reg.test(value);
        if (!card) {
          //判斷座機爲12位
          callback(new Error("身份證格式如:423024xxxx0216xxxx"));
        } else {
          callback();
        }
      }
};

5.價格：

var isPrice = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        var reg = /^-?\d{1,4}(?:\.\d{1,2})?$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("數字格式:0-9999或小數點後可加1到2位"));//如:1 或1.8 或1.85
        }
      }
 };

最後總結一下：驗證什麼數據先要知道對應的正則表達，然後再根據相應的前端框架寫出對應的語法規則；element+vue驗證順序：form-->prop-->rules-->validator-->自定義規則

ok 就到這裏嘍