ant design vue 之 v-decorator

1.在 template 中直接使用

required: true 设置必填, trigger: 'blur' 设置失去焦点触发校验

<a-input
  v-decorator="['name', { rules: [{ required: true, message: '请输入账号!'}],trigger: 'blur' }]" 
 />

2.在 script 中设置校验规则

template 部分

 <a-input
   v-decorator="['password', validatorRules.password]"
 />

script 部分

   data(){
    return {
       form: this.$form.createForm(this),
       validatorRules: {
          password : {//name与v-decorator中属性对应
            initialValue: 123456,//初始值
            rules: [
              { required: true, message: '请输入密码!'},//此处开启校验必填
              { min: 5, message: '长度不少于 5 个字符'}, // 长度校验
              { validator: this.validatePassword},//校验规则函数，
            ],
            trigger: 'blur' // 触发方式
          },
        },
    }
  },
   methods: {
      validatePassword(rule, value, callback) {
      
      }
  }

3. 完整代码

<template>
  <div class="login">
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
    <a-form-item label="name">
      <!-- 直接写检验规则 -->
      <a-input
         v-decorator="['name', { rules: [{ required: true, message: '请输入账号!'}],trigger: 'blur' }]" 
      />
    </a-form-item>
    <a-form-item label="password">
      <!-- 在script 里面定义更复杂的检验规则,  -->
      <a-input
        v-decorator="['password', validatorRules.password]"
      />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit">
        Login
      </a-button>
    </a-form-item>
  </a-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data(){
    return {
       form: this.$form.createForm(this),
       validatorRules: {
          password : {//name与v-decorator中属性对应
            initialValue: 123456,//初始值
            rules: [
              { required: true, message: '请输入密码!'},//此处开启校验必填
              { min: 5, message: '长度不少于 5 个字符'}, // 长度校验
              { validator: this.validatePassword},//校验规则函数，
            ],
            trigger: 'blur' // 触发方式
          },
        },
    }
  },
  created(){
    // this.$nextTick(() => {
    //     this.form.setFieldsValue({name:'yyy',password: 123});
    //   })
  },
  mounted(){
    this.form.setFieldsValue({name:'yyy',password: 123});
  },
  methods: {
     handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    validatePassword(rule, value, callback) {
      
    }
  }
}
</script>

注意:

确保使用 this.form.setFieldsValue({name:'yyy',password: 123}) 设置值
或者 this.form.validateFields((err, values) => { }); 获取值
之前
已经 this.$form.createForm(this)

如果在钩子函数里面使用 setFieldsValue 报类似错误

warning.js?d96e:34 Warning: You cannot set a form field before rendering a field associated with the value. You can use `getFieldDecorator(id, options)` instead `v-decorator="[id, options]"` to register it before render.

可以这样试下

this.$nextTick(() => {
  this.form.setFieldsValue({name:'yyy',password: 123});
})