vue ant 表单绑定值与验证

//------------------------------------------------文本----------------------------------------

<template>
  <a-form>
    <a-form-item
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      label="表单绑定"
      :validate-status="fvalidateStatus"
      :help="ferrorMsg"
    >
      <a-input :value="fvalue" @change="fChange"></a-input>
    </a-form-item>
  </a-form>
</template>
<script>
export default {
  data() {
    return {
      fvalue: "信息1",
      fvalidateStatus: "success",
      ferrorMsg: "",
      labelCol: { span: 7 },
      wrapperCol: { span: 12 }
    };
  },
  methods: {
    fChange(e) {
      const value = e.target.value;

      if (value.trim()=='') {
        this.fvalidateStatus = "error";
        this.ferrorMsg = "值不能为空";
      } else {
        this.fvalidateStatus = "success";
        this.ferrorMsg = "";
      }
      this.fvalue = value;
    }
  }
};
</script>

//--------------------------------------------数值---------------------------------------------------------

 

<template>

  <a-form>

    <a-form-item

      :label-col="labelCol"

      :wrapper-col="wrapperCol"

      label="Prime>10"

      :validate-status="fvalidateStatus"

      :help="ferrorMsg"

    >

      <a-input-number :min="1" :max="20" :value="fvalue" @change="handleNumberChange" />

    </a-form-item>

  </a-form>

</template>

<script>

export default {

  data() {

    return {

      fvalue: 11,

      fvalidateStatus: "success",

      ferrorMsg: "",

      labelCol: { span: 7 },

      wrapperCol: { span: 12 }

    };

  },

  methods: {

    handleNumberChange(value) {

      if (value > 10) {

        this.fvalidateStatus = "success";

        this.ferrorMsg = "";

      } else {

        this.fvalidateStatus = "error";

        this.ferrorMsg = "值必须大于10";

      }

      this.fvalue = value;

    }

  }

};

</script>