el-form单个表单项校验方法；element-ui表单单个选项校验；el-form单个表单校验

本文介绍: el–form单个表单项校验方法；element–ui 表单单个选项校验；el–f orm单个表单校验当我们使用 element–ui的el–f orm时，想在提交表单前对其中一个表单进行验证时就可以使用element 自带的方法“validateFie ld”

当我们使用element–ui的el–f orm时，想在提交表单前对其中一个表单进行验证时就可以使用element 自带的方法“validateFie ld”

如图：
在这里插入图片描述
使用示例

&lt;el-form :model="registerForm"
             v-loading='loading'
             :rules="rules"
             ref="registerForm"&gt;
     &lt;el-form-item label="手机号码："
                    size="small"
                    prop="phoneNum"&gt;
        &lt;el-input v-model="registerForm.phoneNum"
                  maxlength="30"
                  placeholder="请输入"&gt;&lt;/el-input&gt;
      &lt;/el-form-item&gt;
</el-form>

data(){
	return {
		rules: {
     		phoneNum: [
          		{ required: true, message: '请输入手机号', trigger: 'blur' },
         		{ pattern: /^1[0-9]{10}$/, message: '请输入正确号码格式', trigger: 'blur' },
     		],
		},
	}
}

//    注意看官方提供的validateField有两个参数，第一个是要校验的表单项的prop值，
//    第二个是一个callback回调函数 里面有一个string类型的errorMessage参数里面的值就是rules里面对该项校验的错误提示信息
//    注意笔者在这儿设立了一个flag标识，那么只要调用该方法且出错时flag就为true，有这个标识这样就有利于接下来的联动
//    当然你也可以使用官方自带的event方法‘validate’ 一样能达到这个效果。

methods:{
	getCheckCode () {
		let flag = false //这儿
        this.$refs.registerForm.validateField('phoneNum', (err) => {
          if (err) {
            	flag = true
          }
        })
        if (flag) {
          	return
        }
	}
}