element-ui form 对象下值怎么校验
在 Element UI 中,可以使用 el-form 组件来创建表单,并使用 rules 属性来定义校验规则。
首先,需要在 data 中定义表单数据对象,并在 el-form 组件中使用 model 属性绑定表单数据对象。例如:
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age"></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 {
form: {
name: '',
age: null
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字', trigger: 'blur' }
]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 校验通过,执行提交操作
// ...
} else {
// 校验不通过,提示错误信息
return false;
}
});
}
}
};
</script>
在上面的示例中,我们定义了一个 form 对象来存储表单数据,同时也定义了一个 rules 对象来定义校验规则。rules 对象的属性名与 form 对象中的属性名对应,每个属性的值是一个数组,数组中可以定义多个校验规则。
当点击提交按钮时,通过 $refs.form.validate 方法来触发表单校验,校验结果会通过回调函数的参数传递给我们。校验通过时,回调函数的参数值为 true,否则为 false。你可以在回调函数中根据校验结果执行相应的操作。
以上是使用 Element UI 来进行表单校验的基本流程,你可以根据实际需求来定义更复杂的校验规则
原文地址: https://www.cveoy.top/t/topic/iHHI 著作权归作者所有。请勿转载和采集!