element_form_校验、表单、嵌套、多层

智码帮MJ682517

已于 2023-08-27 15:12:58 修改

阅读量633

点赞数 5

分类专栏： vue2 element-ui web前端文章标签：前端 vue.js elementui

于 2021-08-08 01:49:26 首次发布

本文链接：https://blog.csdn.net/weixin_51157081/article/details/119497435

版权

web前端同时被 3 个专栏收录

265 篇文章 4 订阅

订阅专栏

77 篇文章 1 订阅

订阅专栏

element-ui

30 篇文章 0 订阅

订阅专栏

1、标签校验

<el-form-item label="标题" :prop="{ required: true, message: '请输入标题', trigger: 'blur' }">
	<el-input v-model="ruleForm.titles" placeholder="请输入标题"></el-input>
</el-form-item>

2、至少两种校验规则

<el-form-item label="标题" prop="titles">
	<el-input v-model="ruleForm.titles" placeholder="请输入标题"></el-input>
</el-form-item>

let rules = {
	titles: [
		{ required: true, message: '请输入标题', trigger: 'blur' },
		{ min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'change' }
	],    
 };

3、对象嵌套校验

<el-form-item label="姓名" prop="user.name"></el-form-item>

let rules = {
	'user.name': [
		{ required: true, message: '姓名不能为空', trigger: 'blur' }
	]
};

4、数组对象嵌套校验

<div v-if="ruleForm.status==5||ruleForm.status==6">
	<div class="content_item" v-for="(item,i) in ruleForm.contents" :key="item.id">
		<div>
			<span>内容：{{item.id}}</span>
			<span class="delete_box" @click="deleteBox(i)">删除</span>
		</div>

		<el-form-item :prop="`contents[${i}].content`" :rules="rules.content">
			<el-input type="textarea" autosize placeholder="请输入内容" v-model="item.content">
			</el-input>
		</el-form-item>
	</div>
</div>

let rules = {
	content: [
		{ required: true, message: '请输入内容', trigger: 'blur' },
		{ min: 10, max: 100, message: '长度在 10 到 100 个字符', trigger: 'change' }
	]
};