校验方式

表单校验只需在相应控件的v-decorator中声明一系列校验规则(rules)即可。
示例如下：

  1. <a-form
  2.   id="formLogin"
  3.   class="user-layout-login"
  4.   ref="formLogin"
  5.   :form="form"
  6.   @submit="handleSubmit"
  7. >
  8.   <a-form-item>
  9.     <a-input
  10.       size="large"
  11.       type="text"
  12.       placeholder="请输入用户名"
  13.       v-decorator="[
  14.         'username',
  15.         {rules: [{ required: true, message: '请输入用户名' }], validateTrigger: 'change'}
  16.       ]"
  17.     >
  18.       <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
  19.     </a-input>
  20.   </a-form-item>
  22.   <a-form-item>
  23.     <a-input
  24.       size="large"
  25.       type="password"
  26.       autocomplete="false"
  27.       placeholder="请输入密码"
  28.       v-decorator="[
  29.         'password',
  30.         {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
  31.       ]"
  32.     >
  33.       <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
  34.     </a-input>
  35.   </a-form-item>
  37.   <a-form-item v-if="showCaptcha">
  38.     // 自定义校验
  39.     <a-input
  40.       size="large"
  41.       class="captcha-input"
  42.       placeholder="请输入验证码"
  43.       autocomplete="false"
  44.       v-decorator="['captchaInput', {rules: [{required: true, message: '请输入验证码'}, { validator: validCaptcha }], validateTrigger: 'blur'}]"
  45.     >
  46.     </a-input>
  47.     <a-button
  48.       id="btn_captcha"
  49.       @click="createCode"
  50.       class="captcha-code" 
  51.     >{{checkCode}}</a-button>
  52.   </a-form-item>
  54.   <a-form-item style="margin-top:24px">
  55.     <a-button
  56.       size="large"
  57.       type="primary"
  58.       htmlType="submit"
  59.       class="login-button"
  60.       :loading="state.loginBtn"
  61.       :disabled="state.loginBtn"
  62.     >确定</a-button>
  63.   </a-form-item>
  64. </a-form>

常见校验规则

  1. required 该控件必须输入
  2. min 该控件值长度必须大于指定值
  3. max 该控件值长度必须小于指定值
  4. pattern 该控件值必须满足指定的正则表达式
  5. 自定义校验函数
    1. validCaptcha (rule, value, callback) {
    2. const errors = [] // 返回的错误结果，如果该数组为空说明无校验错误
    3. if(!!value && this.checkCode.toUpperCase() != value.toUpperCase()) {
    4.  errors.push('验证码输入错误') // 如果校验错误则将错误消息添加到errors数组
    5. }
    6. callback(errors)  // callback为校验框架的回调函数，此处必须将校验结果作为参数执行回调函数
    7. }

    更多校验方法

    请参见此处async-validator