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 代码