el-form 让某一项触发校验方法
时间: 2023-08-06 10:07:53 浏览: 117
如果你希望在某个 el-form-item 中的表单控件失去焦点时触发校验,可以在 el-form-item 中的表单控件上使用 v-model 绑定表单数据,并设置触发校验的事件为 blur。示例代码如下:
```vue
<template>
<el-form :model="formData" :rules="formRules" ref="form">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username" @blur="$refs.form.validateField('username')" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="formData.password" @blur="$refs.form.validateField('password')" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
username: '',
password: ''
},
formRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单校验通过,可以提交数据
// ...
} else {
// 表单校验不通过,不提交数据
return false
}
})
}
}
}
</script>
```
在上面的代码中,我们给 el-input 绑定了 v-model 来绑定表单数据,并在 @blur 事件中调用了 validateField 方法来触发对应表单项的校验。validateField 方法接收一个字段名作为参数,表示需要校验的表单项。如果需要在多个控件失去焦点时触发校验,可以在多个表单控件上都绑定对应的事件即可。
阅读全文