vue&element-ui搭配使用rules表單校驗規則

驗證手機号&郵箱的寫法

data() {
      var checkPhone = (rule, value, callback) => {
        const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
        if (!value) {
          return callback(new Error('手機号不能為空'))
        }
        setTimeout(() => {
          // Number.isInteger是es6驗證數字是否為整數的方法,但是我實際用的時候輸入的數字總是識别成字元串
          // 是以我就在前面加了一個+實作隐式轉換
          if (!Number.isInteger(+value)) {
            callback(new Error('請輸入數字值'))
          } else {
            if (phoneReg.test(value)) {
              callback()
            } else {
              callback(new Error('手機号格式不正确'))
            }
          }
        }, 100)
      };
      var checkEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
          return callback(new Error('郵箱不能為空'))
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback()
          } else {
            callback(new Error('請輸入正确的郵箱格式'))
          }
        }, 100)
      };
      return {
        rules: {
          sex: [{
            required: true,
            message: '請選擇',
            trigger: 'blur'
          }],
          telephone: [{
            required: true,
            message: '請輸入',
            trigger: 'blur'
          },{ 
            validator: checkPhone, 
            trigger: 'blur' 
          }],
          userName: [{
            required: true,
            message: '請輸入',
            trigger: 'blur'
          }],
          email: [{
            required: true,
            message: '請輸入',
            trigger: 'blur'
          },{ 
            validator: checkEmail, 
            trigger: 'blur' 
          }],
          status: [{
            required: true,
            message: '請選擇',
            trigger: 'blur'
          }]
        },
      }
    },