element-ui表單驗證(電話,郵箱)

element-ui Form表單驗證

最近剛好使用了element-ui的form表單,官網只提供的示例,這里把一些常用的驗證記錄下來,方便后期查找最終的效果是這樣的,

這個表單里還加入了一下其他組件配合使用,這里為了簡潔,就不放那么多代碼,如果你剛好有用到其他功能的可以留言發其他功能的源碼

 

// 這是HTML部分
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px" class="demo-ruleForm">
    <el-form-item label="聯系電話:" prop="buyerPhone" required>
        <el-input v-model="ruleForm.buyerPhone"></el-input>
    </el-form-item>
    <el-form-item label="Email:" prop="buyerEmail" required>
        <el-input v-model="ruleForm.buyerEmail"></el-input>
    </el-form-item>
</el-form>

// 這是js部分
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 {
  ruleForm: {
    buyerPhone: 13833334444,
    buyerEmail: '[e-mail]'
  },
  rules: {
    buyerPhone: [
      { validator: checkPhone, trigger: 'blur' }
    ],
    buyerEmail: [
      { validator: checkEmail, trigger: 'blur' }
    ]
  }
}