AntD v-decorator 孔健验证属性的使用

v-decorator 是 Ant Design 的控件验证属性。

经过 getFieldDecorator 或 v-decorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。

你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。

你不应该用 v-model，可以使用 this.form.setFieldsValue 来动态改变表单值。
 

 <a-form :form="form"
            @submit="handleSubmit"
            class="login-form">
      <h2 class="title">用户登录</h2>
      <a-form-item :validate-status="userNameError() ? 'error' : ''"
                   :help="userNameError() || ''">
        <a-input v-decorator="[
          'userName',
          { rules: [{ required: true, pattern: /^[^\s]*$/, message: '请输入正确的手机号!' }],
           getValueFromEvent: (event) => {return event.target.value.replace(/\s+/g,'')}
          },
        ]"
                 placeholder="手机号">
          <a-icon slot="prefix"
                  type="user"
                  style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>

      <a-form-item :validate-status="passwordError() ? 'error' : ''"
                   :help="passwordError() || ''">
        <a-input v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入密码!' }] },
        ]"
                 type="password"
                 placeholder="密码">
          <a-icon slot="prefix"
                  type="lock"
                  style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <div class="install">
        <div>
          <a-checkbox v-model="isChecked"
                      @change="onPswd">
            记住密码
          </a-checkbox>
        </div>
        <a @click="onForgot">忘记密码</a>
      </div>
      <a-form-item>
        <div class="buttons">
          <a-button type="primary"
                    html-type="submit"
                    :disabled="hasErrors(form.getFieldsError())"
                    style="width: 100%; ">
            登录
          </a-button>
          <!-- <a-button @click="returnHome"
                    type="primary"
                    html-type="submit"
                    style="width: 40%;">
            返回主页
          </a-button> -->
        </div>
      </a-form-item>
    </a-form>

v-decorator 取值：

this.form.validateFields((err, values) => {
  // 这里做逻辑处理
        if (this.isChecked) {
           console.log(values);
          this.$store.commit("setValues", values)
        } else {
          this.$store.commit("setValues", { userName: '', password: '' })
        }
})

v-decorator 赋值：

  mounted () {
    this.form.setFieldsValue({
      userName: store.getters.userName,
      password: store.getters.password,
    })
  },

清空表单数据：

this.form.resetFields