Vue编写添加用户的表单 ~ 不要错过哦

在写项目的过程中遇到了添加用户信息的功能，今天写出来和大家分享。
希望可以帮助到有需要的小伙伴

文章目录

使用element-ui实现布局和样式
javascript中的数据、数据的校验规则以及方法
添加用户的接口

使用element-ui实现布局和样式

在使用element-ui的时候，要引入需要使用的ui组件并注册后，才可以使用
添加用户的按钮

添加用户的表单 – 使用对话框实现
点击添加按钮后会出现这个添加用户的表单

<!--添加用户的按钮-->
<!-- addDialogVisible 值为true 表示显示 false 表示隐藏 -->
<el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
<!--点击“添加用户”的按钮后，弹出来的表单使用对话框实现-->
<!-- 添加用户的对话框 --><!-- addDialogVisible是布尔值 表示对话框的显示与隐藏 --><!-- width 表示对话框的宽度 --><!-- :before-close 在对话框关闭之前会触发 --><!-- span  是内容主体区 --><!-- addDialogClosed  --><el-dialogtitle="添加用户":visible.sync="addDialogVisible"width="50%"@close="addDialogClosed"><!-- 内容主体区域 --><!-- :model="addForm" 添加表单 --><!-- ref="addFormRef" 是表单组件的引用名称 --><!-- :rules="addFormRules" 验证规则 --><el-formref="addFormRef":model="addForm":rules="addFormRules"label-width="70px"><el-form-item label="用户名" prop="username"><el-input v-model="addForm.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="addForm.password"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="addForm.email"></el-input></el-form-item><el-form-item label="手机号" prop="mobile"><el-input v-model="addForm.mobile"></el-input></el-form-item></el-form>

javascript中的数据、数据的校验规则以及方法

<script>
export default {data() {// 验证邮箱的校验规则var checkEmail = (rule, value, cb) => {// 验证邮箱的正则表达式const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/if (regEmail.test(value)) {// 合法的邮箱return cb()}// 非法的邮箱cb(new Error('请输入合法的邮箱'))}// 验证手机号的校验规则var checkMobile = (rule, value, cb) => {// 验证手机号的正则表达式const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/if (regMobile.test(value)) {// 合法的手机号return cb()}// 非法的手机号cb(new Error('请输入合法的手机号'))},// 添加用户的表单数据addForm: {username: '',password: '',email: '',mobile: '',},// 添加表单的验证规则对象addFormRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{min: 3,max: 10,message: '用户名的长度是3~10个字符之间',trigger: 'blur',},],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{min: 6,max: 15,message: '密码的长度是6~15个字符之间',trigger: 'blur',},],/*验证是否输入{ required: true, message: '请输入邮箱', trigger: 'blur' },*//* 验证输入的是否正确{ validator: checkEmail, trigger: 'blur' }*/email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ validator: checkEmail, trigger: 'blur' },],mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ validator: checkMobile, trigger: 'blur' },],},// 生命周期函数// 在生命周期函数中，发起当前的 获取用户列表数据请求created() {this.getUserList()},methods: {// 获取用户列表数据请求 的 方法async getUserList() {// users 是 请求路径// {params:{}} 是 get请求 携带的参数// 把 携带的参数 放到 data()中 比较好// 异步请求会返回一个data属性，{data: res} 把data属性重命名为resconst { data: res } = await this.$http.get('users', {params: this.queryInfo,})// 如果 获取用户列表数据 失败if (res.meta.status !== 200) {return this.$message.error('获取用户列表失败！')}// 点击按钮，添加新用户// addFormRef 整个表单的引用对象addUser() {this.$refs.addFormRef.validate(async (valid) => {// console.log(valid)// 如果预检验失败if (!valid) return// 如果与校验成功// 可以发起添加用户的网络请求const { data: res } = await this.$http.post('users', this.addForm)// 判断添加用户的结果if (res.meta.status !== 201) {this.$message.error('添加用户失败！')}this.$message.success('添加用户成功！')// 隐藏添加用户的对话框this.addDialogVisible = false// 重新获取用户列表数据this.getUserList()})}
}
</script>

添加用户的接口

请求路径：users
请求方法：post
请求参数

参数名	参数说明	备注
username	用户名称	不能为空
password	用户密码	不能为空
email	邮箱	可以为空
mobile	手机号	可以为空

响应参数

参数名	参数说明	备注
id	用户 ID
rid	用户角色 ID
username	用户名
mobile	手机号
email	邮箱

响应数据

{"data": {"id": 28,"username": "tige1200","mobile": "test","type": 1,"openid": "","email": "test@test.com","create_time": "2017-11-10T03:47:13.533Z","modify_time": null,"is_delete": false,"is_active": false},"meta": {"msg": "用户创建成功","status": 201}
}

Vue编写添加用户的表单 ~ 不要错过哦相关推荐

vue中添加附件以及表单内表格动态添加的功能实现
vue前端表单自动生成地址 form-generator vue中添加附件以及表单内表格动态添加的功能实现页面展示 <el-col :span="12"><el ...
前端学习（1900）vue之电商管理系统电商系统之渲染添加用户的表单自定义邮箱的规则
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1899）vue之电商管理系统电商系统之渲染添加用户的表单
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项. 点击之后官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的 ...
Antd Vue 组件库之Table表单
Antd Vue 组件库之Table表单 Table 表格展示行列数据. 何时使用当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用指定表格的 ...
uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
自己编写jQuery插件之表单验证
自己编写jQuery插件之表单验证吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
防止用户将表单重复提交的方法汇总
表单重复提交是在多用户Web应用中最常见.带来很多麻烦的一个问题.有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. ...
html实现动态多表单输入,提交多个动态添加的html表单
我正在构建一个可以动态添加表单的功能.不是表单字段,而是一个完整的单独的HTML表单.提交多个动态添加的html表单我使用JS添加它们. add_email_template $('#add_ema ...

Vue编写添加用户的表单 ~ 不要错过哦

文章目录

使用element-ui实现布局和样式

javascript中的数据、数据的校验规则以及方法

添加用户的接口

Vue编写添加用户的表单 ~ 不要错过哦相关推荐

最新文章

热门文章

Vue编写添加用户的表单 ~ 不要错过哦

文章目录

使用element-ui实现布局和样式

javascript中的数据、数据的校验规则 以及 方法

添加用户的接口

Vue编写添加用户的表单 ~ 不要错过哦相关推荐

最新文章

热门文章

javascript中的数据、数据的校验规则以及方法