当我们使用element-ui的el-form时,想在提交表单前对其中一个表单进行验证时就可以使用element自带的方法“validateField”
如图:
使用示例
<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
}
}
}