a-form（设计重置，赋值，校验）

1.在页面使用a-form

2.在beforeCreate中创建form

 beforeCreate() {
    this.form = this.$form.createForm(this);
  },
1
2
3

3.使用 v-decorator 用idCard绑定input的值。
rules

   <a-form-item label="身份证号码" v-bind="formItemLayout" style="width: 40%;">
            <a-input
              v-decorator="[
                'idCard',
                {rules: [{ required: false, pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/g, message:'请输入正确的身份证号码' }],validateTrigger:'blur'}
              ]"
              placeholder="请输入身份证号码"
              :disabled="true"
            />
          </a-form-item>
1
2
3
4
5
6
7
8
9
10

4.提交时用validateFields：
err是表单验证没通过时回调，此时在里面写return禁止终止，前端会显示出对应message提示。
value是form表单所有 v-decorator的值

this.form.validateFields((err, values) => {
        if (err) {
          return
        }
``}）`


1
2
3
4
5
6
7

5.返显用setFieldsValue赋值：
在这里插入代码片

this.form.setFieldsValue({
            idCard: this.customerInfo.customerName,   
          })
5.1也用可以pick便捷取customerInfo对象的值：

1
2
3
4
5

this.form.setFieldsValue(
pick(this.customerInfo, [
‘idCard’,
])
)

6.重置操作时用resetFields： this.form.resetFields()

感谢阅读，有帮助的话点点赞点点关注谢谢哈。