ant vue from表单验证，用户名、密码、手机校验

<a-form class="user-layout-login" :form="form">
      <a-form-item has-feedback>
        <a-input size="large" type="text" placeholder="用户名" v-decorator="['supplierid', checkRules.supplierid]">
          <a-icon slot="prefix" type="user" />
        </a-input>
      </a-form-item>
      <a-form-item has-feedback>
        <a-input size="large" type="password" placeholder="密码" v-decorator="['password', checkRules.password]">
          <a-icon slot="prefix" type="lock" />
        </a-input>
      </a-form-item>
      <a-form-item has-feedback>
        <a-input size="large" type="password" placeholder="确认密码" v-decorator="['confirmPassword', checkRules.confirmPassword]">
          <a-icon slot="prefix" type="lock" />
        </a-input>
      </a-form-item>
      <a-form-item has-feedback>
        <a-input-group size="large">
          <a-row :gutter="8">
            <a-col :span="5">
              <a-input default-value="+86" :readOnly="true" />
            </a-col>
            <a-col :span="19">
              <a-input v-decorator="['phonenum', checkRules.phonenum]" placeholder="手机号码" />
            </a-col>
          </a-row>
        </a-input-group>
      </a-form-item>
      <a-form-item>
        <drag-verify
          :width="width"
          :height="height"
          :text="text"
          :success-text="successText"
          :background="background"
          :progress-bar-bg="progressBarBg"
          :completed-bg="completedBg"
          :handler-bg="handlerBg"
          :handler-icon="handlerIcon"
          :text-size="textSize"
          :success-icon="successIcon"
          ref="Verify"
        >
        </drag-verify>
      </a-form-item>
      <a-form-item style="margin-top:30px">
        <a-checkbox v-decorator="['remember', { initialValue: true, valuePropName: 'checked' }]">
          <a @click="service">《供应商协同平台服务条款》、《法律声明和隐私政策》</a>
        </a-checkbox>
      </a-form-item>
      <a-form-item style="margin-top:5px">
        <a-button size="large" html-type="submit" type="primary" class="login-button" :disabled="loginBtn" @click="handleSubmit">
          同意条款并注册
        </a-button>
      </a-form-item>
    </a-form>

export default {
  name: 'Login',
  data() {
    return {
      checkRules: {
        supplierid: {
          rules: [
            {
              required: true,
              validator: (rule, value, cbfn) => {
                if (!value) {
                  cbfn('请输入用户名')
                } else if (value) {
                  supplierLogin({ supplierid: value }).then(res => {
                    if (String(res.code) !== '0') {
                      cbfn('用户名不可用')
                    } else {
                      cbfn()
                    }
                  })
                }
              }
            }
          ],
          validateTrigger: 'blur'
        },
        password: {
          rules: [
            {
              required: true,
              validator: (rule, value, cbfn) => {
                if (!value) {
                  cbfn('请输入密码')
                }
                cbfn()
              }
            }
          ],
          validateTrigger: 'change'
        },
        confirmPassword: {
          rules: [
            {
              required: true,
              validator: (rule, value, cbfn) => {
                if (!value) {
                  cbfn('请再一次输入密码')
                } else if (value && value !== this.form.getFieldValue('password')) {
                  cbfn('两次密码不一致')
                }
                cbfn()
              }
            }
          ],
          validateTrigger: 'change'
        },
        phonenum: {
          rules: [
            {
              required: true,
              validator: (rule, value, cbfn) => {
                const regex = /^1[3456789]\d{9}$/
                if (!regex.test(value)) {
                  cbfn('请输入正确格式')
                }
                cbfn()
              }
            }
          ],
          validateTrigger: 'blur'
        }
      },
}}}