Antd-Design-Vue专题：From基础表单如何在输入过程中校验？

From基础表单如何在输入过程中校验？

前端技术：Vue + Ant-Design-Vue

场景模拟：网上有很多关于校验Form-Input的校验方法（都很不错~~）。突发奇想，想通过watch监听输入框的内容 实现校验过程。

效果展示：
实现代码：

// 输入框内容首先添加一个v-model实现双向数据绑定  
//<a-form-item>元素上加入属性validateStatus(提示样式)  help(提示内容)
<template>
  <a-form :form="form"
          :layout="formLayout"
          :label-col="{ span: 1 }"
          :wrapper-col="{ span: 6 }"
          @submit="handleSubmit">
    <a-form-item label="账号"
                 :validateStatus="filedNumStatus"
                 :help="filedNumHelp">
      <a-input type="text"
               v-model="filedNum"
               v-decorator="['name', { rules: [{ required: true, message: '请输入账号' }] }]" />
    </a-form-item>
    <a-form-item label="密码"
                 :validateStatus="filedPwdStatus"
                 :help="filedPwdHelp">
      <a-input type="password"
               v-model="filedPwd"
               v-decorator="['pwd', { rules: [{ required: true, message: '请输入密码' }] }]" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary"
                html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
--------------------------------------------------------------
// 在data里面属性值默认都为空
  data () {
    return {
      formLayout: 'horizontal',
      filedNum: '',
      filedPwd: '',
      filedNumStatus: '',
      filedPwdStatus: '',
      filedNumHelp: '',
      filedPwdHelp: '',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
  --------------------------------------------------------------
   // 上法宝  watch大法
   //监听watch的变化(即输入内容的变化),
   //当输入值的长度在<5的区间内就展示提示,相反则不展示
  watch: {
    filedNum (val) {
      if (val.length < 5) {
        this.filedNumStatus = 'error'
        this.filedNumHelp = '必须大于5个字符'
      } else {
        this.filedNumStatus = ''
        this.filedNumHelp = ''
      }
    }
  },
  //最后别忘了如果是登录注册功能，提交的时候也要把判断加上哦！！！

座右铭： 所谓底线，大概只有突破它的时候才能真正触摸到它，随之而来的，你内心看重什么，与过去相比改变了什么，为何而改变……一切都水落石出了。