elementUI的表单错误项在加载页面后自动标红并提示+自动定位到表单项的实现
在使用Element UI时,如果需要在页面加载后自动标记错误并提示用户,可以通过以下步骤实现:
- 设置表单的
model
绑定的数据对象,并为需要验证的字段设置相应的规则。 - 使用
el-form
组件的ref
属性来引用表单,并在mounted
生命周期钩子中调用this.$refs.formName.validate()
方法来触发验证。 - 如果需要自动定位到错误字段,可以结合Element UI的
scroll-to-field
工具函数使用。
以下是一个简单的例子:
<template>
<el-form :model="form" :rules="rules" ref="form" label-width="120px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码长度不少于6位', trigger: 'blur' }
]
}
};
},
mounted() {
this.submitForm('form');
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 验证通过的操作
} else {
// 使用Element UI的scroll-to-field工具函数自动定位到第一个错误字段
import('element-ui').then((element) => {
element.scrollTo.scrollToField(this.$refs[formName].$el, true);
});
return false;
}
});
}
}
};
</script>
在这个例子中,当页面加载(mounted
)后,会自动调用submitForm
方法进行表单验证。如果验证不通过,会自动滚动至第一个错误的表单项。
评论已关闭