VUE+element-ui使用rules在提交时对form表单进行校验

最新推荐文章于 2025-05-10 17:32:20 发布

除了菜还是菜

最新推荐文章于 2025-05-10 17:32:20 发布

阅读量5.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue+element 文章标签： vue

本文链接：https://blog.youkuaiyun.com/wjw_de_java/article/details/113863797

vue+element 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了在Vue.js中使用el-form和el-form-item组件进行表单验证的四个步骤：1) 在form标签中配置rules和model；2) 为el-form-item设置prop属性；3) 在data中定义验证规则；4) 添加提交时的验证方法。通过这些步骤，可以确保在用户提交表单前进行有效的数据校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤
1.配置el-form
在你的form表单中增加rules的配置，如

<el-form ref="addFrom" :rules="rules" :model="addFrom" label-width="120px">
	...
</el-form>

2.配置el-form-item
在对应的字段增加prop属性，如（注意此处prop属性要跟步骤3对应）

<el-form ref="addFrom" :rules="rules" :model="addFrom" label-width="120px">
	 <el-form-item label="此处为金额" prop="Price">
     	<el-input v-model="addFrom.price" placeholder="请输入"></el-input>
     </el-form-item>
</el-form>

3.配置规则
在export default的data中增加rules的规则配置

export default {
    ...
    data() {
        return {
            ...
            rules: {
                price: [{ required: true, message: '不能为空', trigger: 'blur' }]
            },
            ...
        }
    },

4.提交时增加方法

//点击提交的方法
riskSubmit(){
		//进行表单验证
        this.$refs.updateForm.validate(valid => {
       		//表单验证失败
            if (!valid) {
            	//提示语
            	this.$message("提示语");
                return false;
            }
            //这里可以写表单验证通过之后执行的代码
            //.......
        });
    },