参考 element ui form

场景描述

给定一个form表单，有两个字段，一个是手机号，一个是验证码。
我想在获取验证码的时候，验证一下手机号是否正确。
这就涉及到了表单的部分验证。

该表单如下

<el-form
    ref="loginMobileForm"
    :model="loginFormMobile"
    :rules="loginMobileRules"
>
    <el-form-item prop="mobile">
        <el-input
            v-model.trim="loginFormMobile.mobile"
            placeholder="请输入手机号"
            name="mobile"
            spellcheck="false"
            type="text"
            tabindex="21"
            autocomplete="on"
            @focus="highlight('mobile')"
            @blur="removeHighlight"
        />
    </el-form-item>
    <el-form-item prop="verificationCode">
        <el-input
            ref="verificationCode"
            v-model.trim="loginFormMobile.verificationCode"
            type="text"
            placeholder="验证码"
            name="verificationCode"
            tabindex="22"
            @focus="highlight('verificationCode')"
            @blur="removeHighlight"
        />
    </el-form-item>
</el-form>

验证如下

this.$refs.loginMobileForm.validateField(["mobile"], errMsg => {
    if (errMsg) {
            return false;
    } else {
        // 验证过mobile是没问题的，在这里做对应的操作，比如请求短信验证码接口
});

这里表示对mobile字段做预校验。
事实上可以对多个字段做预验证，写成数组的形式即可。

总结

1. 给表单加上ref
2. validateField
3. ["mobile"]——可以这样写成数组，也可以写字符串
4. 后边的回调，是验证错误的message