el-form 触发校验方法
时间: 2023-08-06 18:07:53 浏览: 117
vue实现表单数据验证的实例代码
要触发 el-form 的校验方法,可以使用 el-form 的 ref 属性获取到 el-form 实例,然后调用实例的 validate 方法即可。示例代码如下:
```vue
<template>
<el-form ref="form" :model="formData" :rules="formRules">
<el-form-item prop="username" label="用户名">
<el-input v-model="formData.username"></el-input>
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input v-model="formData.password" type="password"></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-form 绑定了一个 ref 属性,然后在 submitForm 方法中通过 this.$refs.form 获取到 el-form 实例,并调用 validate 方法进行校验。validate 方法的回调函数会传入一个布尔值 valid,表示表单校验是否通过。如果校验通过,可以执行相应的操作,比如提交表单数据;如果校验不通过,可以返回 false,阻止表单提交。
阅读全文