elemtn-ui 表单校验
时间: 2023-09-30 14:04:18 浏览: 43
这是一个技术问题,我可以回答。在使用 elemtn-ui 的表单校验时,需要在表单项的 validationRules 属性中定义校验规则,例如:
```
<el-form-item label="用户名" prop="username">
<el-input v-model="user.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="user.password"></el-input>
</el-form-item>
<script>
export default {
data() {
return {
user: {
username: '',
password: ''
}
}
},
methods: {
onSubmit() {
this.$refs.form.validate(valid => {
if (valid) {
// 校验通过,执行提交逻辑
} else {
// 校验失败,显示错误信息
}
})
}
},
validations: {
user: {
username: { required },
password: { required, minlength: minLength(6) }
}
}
}
</script>
```
这里使用了`$refs.form.validate`方法进行校验,校验结果会以布尔值的形式返回,通过判断校验结果来决定是否执行提交逻辑。校验规则定义在`validations`属性中,可设置多个表单项的校验规则。