講一講Vue+Ant Design表單驗證

與Vue搭配的後臺管理UI框架，最火的莫過於餓了嗎的element-ui和阿里的Ant Design，這兩個框架都在實際項目上使用過，也都是各有各的優勢

最早接觸的仍是element - ui，後來項目調整，才接觸到Ant Design，Form表單這塊不支持雙向綁定式的校驗功能，在1.5.0+版本增長了FormModel表單才支持。今天就講講這兩個在項目上使用的區別

1 Form 表單

具備數據收集、校驗和提交功能的表單，包含複選框、單選框、輸入框、下拉選擇框等元素。可是不支持雙向綁定

使用

<template>
  <a-form :form="form"></a-form>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
};
</script>

表單驗證

<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item>
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
  methods: {
    // 表單驗證
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
  },
};
</script>

表單賦值

this.form.setFieldsValue({
    note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
});

賦值的時候須要調用setFieldsValue才能改變表單控件的值。

2 FormModel 表單

功能同上，支持v-model

使用

<template>
  <a-form-model ref="ruleForm" :model="form">
    <a-form-model-item>
      <a-input v-model="form.name"/>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '',
      },
    };
  },
};
</script>

表單驗證
表單驗證a-form-model增長rules，再每一個表單增長ref和prop就能夠了，rules這個是對象，因此的驗證規則均可以寫在裏面，一個表單項也能夠有多個驗證規則。

<template>
  <a-form-model ref="ruleForm" :model="form" :rules="rules">
    <a-form-model-item ref="name" label="Activity name" prop="name">
      <a-input v-model="form.name"/>
    </a-form-model-item>
    <a-form-model-item>
      <a-button type="primary" @click="onSubmit">
        Create
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '',
      },
      rules: {
        name: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

表單賦值

表單賦值這個因爲是雙向綁定，因此直接賦值便可

this.form.name = 'lilei'

3 總結

Form和FormModel都具備數據收集、校驗和提交功能，區別就在因而否支持雙向綁定式的校驗功能，若是使用FormModel，Ant Design版本須要1.5.0+。