vue問題六：表單驗證

表單驗證規則

查看文檔：https://blog.csdn.net/weixin_42018790/article/details/80762149

1). el-form增長 :rules="rules"

2).  el-form-item 中的label增長屬性 prop="名稱"

3).  data中定義rules:{}

例子：

<el-form ref="form" :rules="rules" :model="form" label-width="300px">
  <el-form-item label="發貨人電話" prop="phone">
    <el-input class="inp" v-model="form.phone"></el-input>
    </el-form-item>
  <el-form-item label="發貨地址：" prop="address">
    <el-input class="inp" v-model="form.address" ></el-input>
    <el-button type="primary"@click="onSubmit('form')">經常使用地址</el-button>
   </el-form-item>
 </el-form>

vue html代碼

<script>
export default {
  data() {
 // 此處自定義校驗手機號碼js邏輯
    var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('號碼不能爲空!!'))
      }
      setTimeout(() => {
        if (!phoneReg.test(value)) {
          callback(new Error('格式有誤'))
        } else {
          callback()
        }
      }, 1000)
}
},
    return {
      form: {
        phone:'',
        address: '',
      },
      // 校驗規則
      rules: {
 // 校驗手機號碼，主要經過validator來指定驗證器名稱
        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        address: [
        { required: true, //是否必填
          message: '地址不能爲空', //規則
          trigger: 'blur'  //何事件觸發
        },
        //能夠設置雙重驗證標準
        { min: 3, max: 5,  message: '長度在 3 到 5 個字符', }
      ]
      }
    }
  }

</script>

Vue js 代碼