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