VUE项目后台管理系统（七）弹框形式新增用户信息，关闭添加用户对话框，重置表单。表单的验证规则

最新推荐文章于 2024-10-16 16:47:44 发布

原创最新推荐文章于 2024-10-16 16:47:44 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了如何使用 Vue.js 的 Element UI 库创建一个动态弹框，用于添加用户信息。通过设置 `:visible.sync` 属性控制弹框的显示与关闭，并详细展示了表单验证规则的实现，包括用户名、密码、邮箱和手机号的必填及格式验证。此外，还阐述了点击确定按钮时如何触发后台接口，验证表单并提交数据，以及关闭弹框和重置表单的方法。

弹框

页面有一个按钮，一点击，弹出框，并且在这个里面添加数据

在这里插入图片描述

在这里插入图片描述
以上的代码就是官网的弹框

在这里插入图片描述
有一个属性
默认弹框是false

	<!-- 添加用户dialog对话框 -->

		<el-dialog align="left" title="添加用户" :visible.sync="addUserVisible" width="50%" @close="closeAdduserDialog"  >
			<!--主体部分 -->
			<el-form :model="addUserForm" status-icon :rules="addUserFormRul" ref="addUserFormRel" label-width="100px" class="demo-ruleForm">
				<el-form-item label="用户名" prop="username">
					<el-input  v-model="addUserForm.username" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="addUserForm.password" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="addUserForm.email"></el-input>
				</el-form-item>
				<el-form-item label="手机" prop="mobile">
					<el-input v-model.number="addUserForm.mobile"></el-input>
				</el-form-item>

			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="addUserVisible = false">取 消</el-button>
				<el-button type="primary" @click="addUserList">确 定</el-button>
			</span>
		</el-dialog>

以上代码中 :visible.sync=“addUserVisible” 是动态绑定了是否显示

他的值是true 或者 false

在这里插入图片描述
我们只要点击了按钮，改变这个变量的值，那么弹框就会显示或者隐藏了

在这里插入图片描述
其实弹框就是下面这个标签，只需要让他隐藏或者显示就可以了
:visible.sync 这个属性就可以控制这个弹框显示还是关闭

里面想要显示什么东西，就显示什么东西

		<el-dialog align="left" title="添加用户" 
		:visible.sync="addUserVisible" width="50%" @close="closeAdduserDialog"  >
	
		</el-dialog>

在这里插入图片描述
这个要和表单里面的一样

之后的就是一些事件了

关闭添加用户对话框，重置表单

弹框上面有一个关闭的事件，点击的时候我们要求他走一个方法，里面就是对当前表单的重置

在这里插入图片描述

表单的验证规则

在这里插入图片描述
以上是给这个表单绑定了一个规则

我们开始写对应的规则

在这里插入图片描述

        //添加用户规则
				addUserFormRul: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 6,
							message: '长度为6个字符',
							trigger: 'blur'
						}
					],										
					phone: [ { validator: checkMobile, trigger: 'blur' }],
        },

添加的方法

  	//点击确定发送添加新用户接口
			addUserList(){
				this.$refs.addUserFormRel.validate(valid=>{
					//校验规则全部正确向后台发送请求
					if(!valid) return;
					this.$http.post('users',this.addUserForm).then(res=>{
						//console.log(res);
						if(res.data.meta.status!==201) return this.$message.error('添加用户失败！');
						this.$message.success('添加用户成功！');
						//刷新列表
						this.getUserList();
						弹框关闭
						this.addUserVisible = !this.addUserVisible;
					})
				})
				// this.$refs.addUserFormRel.validateField(function(['username','passworld'],err=>{
				// 	console
				// })
					
				
					
				
			},