自动校验

src/views/Forms/BasicForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-form :layout="formLayout">
+    <a-form :layout="formLayout" :form="form">
       <a-form-item
         label="Form Layout"
         :label-col="formItemLayout.labelCol"
@@ -25,17 +25,24 @@
         label="Field A"
         :label-col="formItemLayout.labelCol"
         :wrapper-col="formItemLayout.wrapperCol"
-        :validateStatus="fieldAStatus"
-        :help="fieldAHelp"
       >
-        <a-input v-model="fieldA" placeholder="input placeholder" />
+        <a-input
+          v-decorator="[
+            'fieldA',
+            {
+              initialValue: fieldA,
+              rules: [{ required: true, min: 6, message: '必须大于5个字符' }]
+            }
+          ]"
+          placeholder="input placeholder"
+        />
       </a-form-item>
       <a-form-item
         label="Field B"
         :label-col="formItemLayout.labelCol"
         :wrapper-col="formItemLayout.wrapperCol"
       >
-        <a-input v-model="fieldB" placeholder="input placeholder" />
+        <a-input v-decorator="['fieldB']" placeholder="input placeholder" />
       </a-form-item>
       <a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
         <a-button type="primary" @click="handleSubmit">
@@ -49,24 +56,17 @@
 <script>
 export default {
   data() {
+    this.form = this.$form.createForm(this);
     return {
       formLayout: "horizontal",
-      fieldA: "",
-      fieldB: "",
-      fieldAStatus: "",
-      fieldAHelp: ""
+      fieldA: "hello",
+      fieldB: ""
     };
   },
-  watch: {
-    fieldA(val) {
-      if (val.length <= 5) {
-        this.fieldAStatus = "error";
-        this.fieldAHelp = "必须大于5个字符";
-      } else {
-        this.fieldAStatus = "";
-        this.fieldAHelp = "";
-      }
-    }
+  mounted() {
+    setTimeout(() => {
+      this.form.setFieldsValue({ fieldA: "hello world" });
+    }, 3000);
   },
   computed: {
     formItemLayout() {
@@ -92,15 +92,12 @@ export default {
       this.formLayout = e.target.value;
     },
     handleSubmit() {
-      if (this.fieldA.length <= 5) {
-        this.fieldAStatus = "error";
-        this.fieldAHelp = "必须大于5个字符";
-      } else {
-        console.log({
-          fieldA: this.fieldA,
-          fieldB: this.fieldB
-        });
-      }
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log(values);
+          Object.assign(this, values);
+        }
+      });
     }
   }
 };