```
<template>
<div>
<!-- 登录表单 -->
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
<!--
-->
<!-- <el-form-item prop="xiaoqu">
<span>校区:</span><el-input v-model="loginForm.xiaoqu"></el-input>
</el-form-item> -->
<el-form-item prop="xiaoqu">
<span>校区:</span><br>
<el-select v-model="loginForm.xiaoqu" placeholder="请选择校区">
<el-option label="辽宁鞍山科技大学" value="辽宁鞍山科技大学"></el-option>
</el-select>
</el-form-item>
<!-- 校区 end -->
<!-- 区域 -->
<el-form-item prop="quyu">
<span>区域:</span><el-input v-model="loginForm.quyu"></el-input>
</el-form-item>
<!-- 区域 end -->
<!-- 楼宇 -->
<el-form-item prop="louyu">
<span>楼宇:</span><el-input v-model="loginForm.louyu"></el-input>
</el-form-item>
<!-- 楼宇 end -->
<!-- 房间号 -->
<el-form-item prop="fangjian">
<span>房间号:</span><el-input v-model="loginForm.fangjian"></el-input>
</el-form-item>
<!-- 房间号 end -->
<!-- 用户名 -->
<el-form-item prop="username">
<span>用户名:</span><el-input v-model="loginForm.username"></el-input>
</el-form-item>
<!-- 用户名 end -->
<!-- 性别 -->
<el-form-item prop="xingbie">
<span>性别:</span><br>
<el-select v-model="loginForm.xingbie" placeholder="请选择性别">
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item prop="xingbie">
<span>性别:</span><el-input v-model="loginForm.xingbie"></el-input>
</el-form-item> -->
<!-- 性别 end -->
<!-- 电话 -->
<!-- <el-form-item prop="tel">
<span>电话:</span><el-input v-model="loginForm.tel"></el-input>
</el-form-item> -->
<el-form-item prop="tel">
<span>电话:</span><br>
<el-input v-model="loginForm.tel"/>
</el-form-item>
<!-- 电话 end -->
<!-- 按钮区 -->
<el-form-item class="btns">
<el-button type="primary" @click="login">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data () {
var isMobileNumber = (rule, value, callback) => {
if (!value) {
return new Error('请输入电话号码')
} else {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
const isPhone = reg.test(value)
value = Number(value) // 转换为数字
if (typeof value === 'number' && !isNaN(value)) { // 判断是否为数字
value = value.toString() // 转换成字符串
if (value.length < 0 || value.length > 12 || !isPhone) { // 判断是否为11位手机号
callback(new Error('手机号码格式如:138xxxx8754'))
} else {
callback()
}
} else {
callback(new Error('请输入电话号码'))
}
}
}
return {
// 登录表单数据
loginForm: {
xiaoqu: '',
quyu: '',
louyu: '',
fangjian: '',
username: '',
xingbie: '',
tel: ''
},
// 表单验证规则
loginFormRules: {
// 验证用户名
xiaoqu: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
// 验证楼宇
louyu: [
{ required: true, message: '请输入楼宇', trigger: 'blur' }
],
// 验证房间号
fangjian: [
{ required: true, message: '请输入房间号', trigger: 'blur' }
],
// 验证姓名
username: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
// 验证性别
xingbie: [
{ required: true, message: '请选择性别', trigger: 'blur' }
],
// 验证手机号
// tel: [
// { required: true, message: '请输入正确手机号', trigger: 'blur' }
// ],
tel: [
{ required: true, message: '手机号码格式如:138xxxx8754', trigger: 'blur' },
{ validator: isMobileNumber, trigger: 'blur' }
]
}
}
},
methods: {
// 登录验证
login () {
this.$refs.loginFormRef.validate(async valid => {
console.log(valid)
console.log(this.loginForm)
if (!valid) return
// const result
const { data: res } = await this.$http.post('login/login', this.loginForm)
if (res.code !== 1) return this.$message.error(res.msg)
this.$message.success(res.msg)
console.log(res)
// window.sessionStorage.setItem('token', res.token)
// this.$router.push('/home')
// console.log(window.sessionStorage.getItem('token'))
})
}
}
}
</script>
<style>
.el-form{
padding:10px;
}
.el-select{
width: 100%;
}
</style>
```
- HTML
- 讯飞插件
- Python
- 王者荣耀
- demo_cg.py
- demo_cg_TT.py
- img.py
- MySQL
- 清空表数据
- ID自增长重置
- 用户密码及权限操作
- 外键在数据库中的作用
- MySQL增删改查语句
- DDL-数据库操作
- DDL-表操作-查询
- DDL-表操作-创建
- DDL-表操作-数据类型
- DDL-表操作-修改
- DDL-表操作-删除
- DML-语句
- DML-添加数据
- DML-修改数据
- DML-删除数据
- DQL-语法
- DQL-基本查询
- DQL-条件查询
- DQL-聚合函数
- DQL-分组查询
- DQL-排序查询
- DQL-分页查询
- DCL-介绍
- DCL-管理用户
- DCL-权限控制
- 函数
- JS
- ajax
- ajax get请求
- ajax post提交
- ajax 同时上传文本和文件到数据库(inpt text和input file)
- 路径传值+接收解析
- js 本地sessionStorage
- js Excel导出.xls
- 二维码生成插件
- VUE-CLI4
- 安装手脚架及插件
- ECharts-数据可视化
- element-ui-时间戳
- qrcode二维码生成插件
- vuedraggable-拖拽组件
- vue-drag-resize-自由拖拽、缩放组件
- gitee配置
- src
- plugins
- element.js
- echartsMixin.js
- views
- login
- login.vue
- btn.vue
- home
- home.vue
- Welcome.vue
- user
- users.vue
- router
- main.js
- App.vue
- 引入语法
- 获取路径传值
- ajax请求
- token语法
- NPM更换镜像方案
- PHP
- PHP 微信网页登录
- PHP 判断函数
- PHP 获取微信公众号openid
- PHP 实现发送模板消息(微信公众号版)
- PHP 阳历阴历转换计算生肖闰年
- PHP 接口数组形式
- PHP 同文件夹下顺序命名
- PHP 输出文件
- PHP E-mail发送
- PHP cURL资源
- PHP 远程访问控制服务器
- PHP 8.0 开启mysqli扩展
- PHP 使用 OSS 批量上传图片
- PHP md5 加密与解密
- ThinkPHP
- PT6
- TP6安装多应用
- TP5
- view渲染模板常见语法
- Visual Studio Code
- 介绍
- 插件-eslint
- vs code插件
- VSCode添加自定义模板
- SFTP
- md格式的文档
- mermaid
- frp内网穿透
- 自定义端口
- ui-china.cn
- 常用软件
- 框架
- 服务器
- 微信小程序
- 云函数 Email
- 参数传递
- 其他
- VMware虚拟机centos7设置静态ip 连接外网