elementUI表单中校验某一项
在Element UI中,可以使用表单验证规则来校验表单中的某一项。
首先,需要在表单项的rules属性中定义验证规则。例如,如果要校验一个输入框中的内容不能为空,可以使用required规则:
<el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
<el-input v-model="form.name"></el-input>
</el-form-item>
在上面的例子中,prop属性指定了表单项的字段名,rules属性定义了验证规则。required规则表示该字段不能为空,message属性定义了验证失败时的错误提示,trigger属性指定了触发验证的时机,这里使用了blur,表示在失去焦点时触发验证。
然后,需要在表单的validate方法中调用验证函数来进行验证。例如:
methods: {
validateForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 验证通过,执行提交操作
} else {
// 验证失败,给出错误提示
}
});
}
}
在上面的例子中,this.$refs.form表示表单的引用,validate方法用于触发验证。验证结果通过回调函数的参数valid返回,如果valid为true,表示验证通过,否则表示验证失败。
以上是Element UI中校验表单中某一项的基本步骤,根据具体的需求,可以定义不同的验证规则来校验不同的表单项。
原文地址: https://www.cveoy.top/t/topic/iBtH 著作权归作者所有。请勿转载和采集!