el-form单个表单项校验方法；element-ui表单单个选项校验；el-form单个表单校验-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-form单个表单项校验方法；element-ui表单单个选项校验；el-form单个表单校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

如图：
el-form 表单验证,日常经验总结,javascript,vue.js,elementui
使用示例文章来源地址https://www.toymoban.com/news/detail-597361.html

<el-form :model="registerForm"
             v-loading='loading'
             :rules="rules"
             ref="registerForm">
     <el-form-item label="手机号码："
                    size="small"
                    prop="phoneNum">
        <el-input v-model="registerForm.phoneNum"
                  maxlength="30"
                  placeholder="请输入"></el-input>
      </el-form-item>
</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
        }
	}
}