btn.vue · 我的网页程序

``` <template> <div>  <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">   <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>   <el-form-item prop="quyu"> <span>区域:</span><el-input v-model="loginForm.quyu"></el-input> </el-form-item>   <el-form-item prop="louyu"> <span>楼宇:</span><el-input v-model="loginForm.louyu"></el-input> </el-form-item>   <el-form-item prop="fangjian"> <span>房间号:</span><el-input v-model="loginForm.fangjian"></el-input> </el-form-item>   <el-form-item prop="username"> <span>用户名:</span><el-input v-model="loginForm.username"></el-input> </el-form-item>   <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="tel"> <span>电话:</span><br> <el-input v-model="loginForm.tel"/> </el-form-item>   <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> ```