devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面，路由式开发（附完整代码）_前端校验手机号

作者：IT小白 | 2024-02-23 02:42:08

赞

踩

前端校验手机号

目录

效果图：

一、template部分

二、style样式

三、script部分

1.先对手机号的格式进行一个判断

2.接下来就是表单验证规则rules

3.最后就是methods了

（1）首先我们给获取验证码绑定一个方法

（2）然后封装一个axios接口，方便后面测试联调（这部分每个人封装的都不一样）

（3）然后是倒计时的方法

（4）最后的登录按钮

四、完整代码

效果图：

一、template部分

这里不是重点，自行对照，并不需要与之完全相同

  1. <div>
  2.     <el-form
  3.         ref="form"
  4.         label-width="70px"
  5.         :inline="true"
  6.         class="login-container"
  7.         :model="form"
  8.         :rules="rules"
  9.     >
  10.       <h3 class="login_title"> 手 机 验 证 登 录 </h3>
  11.  
  12.       <el-form-item
  13.           label="手机号"
  14.           prop="CellPhone"
  15.           ref="phone"
  16.       >
  17.           <el-input v-model="form.CellPhone" placeholder="请输入手机号">
  18.               <el-select placeholder="+86"></el-select>
  19.           </el-input>
  20.       </el-form-item>
  21.  
  22.       <el-form-item
  23.           label="验证码"
  24.           prop="VerificationCode"
  25.       >
  26.           <el-input v-model="form.VerificationCode" placeholder="请输入验证码">
  27.               <el-button slot="suffix" :disabled="disabled" @click="getCode">
  28.                   <span class="Time">{{btnTxt}}</span>
  29.               </el-button>
  30.           </el-input>
  31.       </el-form-item>
  32.  
  33.       <el-form-item>
  34.         <el-button @click="submit" class="login_button" type="primary"> 登 录 </el-button>
  35.       </el-form-item>
  36.     </el-form>
  37.   </div>

二、style样式

样式我是用less写的，编写之前需要安装less和less-loader

npm i less

npm i less-loader

值得注意的是，要注意版本，太新或者太久都可能导致无法运行

剩下的就是样式了：

  1. <style lang="less" scoped>
  2. .login-container {
  3.   width: 450px;
  4.   border:1px solid #eaeaea;
  5.   margin: 180px auto;
  6.   padding: 35px 35px 15px 35px;
  7.   border-radius: 15px;
  8.   box-shadow: 0 0 25px #cac6c6;
  9.   background-color: #ffffff;
  10.   box-sizing: border-box;
  11.    //修改element的样式的方法有多种，/deep/只是其中一种
  12.   /deep/ .el-input__inner {
  13.     width: 120%;
  14.     border: 0px;
  15.     border-bottom: 1px solid;
  16.   }
  17.    .el-button {
  18.     border: 0px;
  19.     margin: -80px;
  20.     .span {
  21.       margin-left: 50px;
  22.     }
  23.   }
  24.   .login_title {
  25.     text-align: center;
  26.     margin-bottom: 40px;
  27.     color: #505458;
  28.   }
  29.   .el-input {
  30.     width: 198px;
  31.   }
  32.   .login_button {
  33.     margin-left: 105px;
  34.     margin-top: 10px;
  35.   }
  36.   .time {
  37.     width: 50px;
  38.   }
  39. }
  40.  
  41. </style>

样式里有的一行代码能写完的东西用了多行，可自行修改（别问我为什么不改）

三、script部分

1.先对手机号的格式进行一个判断

  1. const validatePhone = (rule, value, callback) => {
  2.        // console.log(rule)
  3.       // console.log(value)
  4.       // console.log(callback)
  5.  
  6.       // 判断输入框中是否输入手机号
  7.       if (!value) {
  8.         callback(new Error('手机号不能为空'))
  9.       }
  10.       //正则表达式进行验证手机号，从1开始，第二位是35789中的任意一位，以9数字结尾
  11.       if (!/^1[35789]\d{9}$/.test(value)) {
  12.         callback(new Error('手机号格式不正确'))
  13.       }
  14.       callback()
  15.     }

2.接下来就是表单验证规则rules

  1. rules: {
  2.         CellPhone: [
  3.           { required: true, trigger: 'blur', message: '请输入11位手机号'},
  4.           { required: true, trigger: 'blur', min: 11, max: 11, message: '长度不符合'},
  5.           { required: true, trigger: 'blur', validator: validatePhone}
  6.         ],
  7.         VerificationCode: [
  8.           { required: true, trigger: 'blur', message: '请输入4位验证码'},
  9.           { required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}
  10.         ],
  11.       }
required是否必填，如不设置，则会根据校验规则自动生成boolean—false
trigger触发方式Stringclick/focus/hover/manualclick
blur在 Input 失去焦点时触发(event: Event)
validate对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promiseFunction(callback: Function(boolean, object))

3.最后就是methods了

（1）首先我们给获取验证码绑定一个方法

  1. //获取手机验证码方法
  2.     getCode() {
  3.       // 校验手机号码
  4.       if (!this.form.CellPhone) {
  5.         //号码校验不通过
  6.         this.$message({
  7.           message: '请输入手机号',
  8.           type:'warning',
  9.         });
  10.         //正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
  11.       } else if (!/1[35789]\d{9}/.test(this.form.CellPhone)) {
  12.         // 失去焦点后自动触发校验手机号规则
  13.       } else {
  14.         this.time = 60;
  15.         this.disabled = true;
  16.         //调用倒计时方法
  17.         this.timer();
  18.     }
  19. }

（2）然后封装一个axios接口，方便后面测试联调（这部分每个人封装的都不一样）

  1. GetPhone({
  2.           CellPhone: this.form.CellPhone,
  3.         }) .then(({data}) => {
  4.           if (data.code === 200) {
  5.             this.$message({
  6.               message: '验证成功',
  7.               type: 'success',
  8.             })
  9.           } else {
  10.             this.$message({
  11.               message: '发送失败',
  12.               type: 'warning',
  13.             })
  14.           }
  15.         })

（3）然后是倒计时的方法

  1. timer() {
  2.       if (this.time > 0) {
  3.         this.time--;
  4.         // console.log(this.time);
  5.         this.btnTxt = this.time + "s后重新获取验证码";
  6.         setTimeout(this.timer, 1000);
  7.       } else {
  8.         this.time = 0;
  9.         this.btnTxt = "获取验证码";
  10.         this.disabled = false;
  11.       }
  12.     },

（4）最后的登录按钮

  1. submit() {
  2.       this.getCode(({data}) => {
  3.         if (data.code === 200) {
  4.           this.$router.push('/')
  5.         } else {
  6.           this.$message.error(data.data.rules.message)
  7.         }
  8.       })
  9.     }

四、完整代码

  1. <template>
  2.   <div>
  3.     <el-form
  4.         ref="form"
  5.         label-width="70px"
  6.         :inline="true"
  7.         class="login-container"
  8.         :model="form"
  9.         :rules="rules"
  10.     >
  11.       <h3 class="login_title"> 手 机 验 证 登 录 </h3>
  12.  
  13.       <el-form-item
  14.           label="手机号"
  15.           prop="CellPhone"
  16.           ref="phone"
  17.       >
  18.           <el-input v-model="form.CellPhone" placeholder="请输入手机号">
  19.               <el-select placeholder="+86"></el-select>
  20.           </el-input>
  21.       </el-form-item>
  22.  
  23.       <el-form-item
  24.           label="验证码"
  25.           prop="VerificationCode"
  26.       >
  27.           <el-input v-model="form.VerificationCode" placeholder="请输入验证码">
  28.               <el-button slot="suffix" :disabled="disabled" @click="getCode">
  29.                   <span class="Time">{{btnTxt}}</span>
  30.               </el-button>
  31.           </el-input>
  32.       </el-form-item>
  33.  
  34.       <el-form-item>
  35.         <el-button @click="submit" class="login_button" type="primary"> 登 录 </el-button>
  36.       </el-form-item>
  37.     </el-form>
  38.   </div>
  39. </template>
  40.  
  41. <script>
  42. import {GetPhone} from "@/Api/api";
  43.  
  44. export default {
  45.   name: "AppPhone",
  46.   data() {
  47.     const validatePhone = (rule, value, callback) => {
  48.       // console.log(rule)
  49.       // console.log(value)
  50.       // console.log(callback)
  51.       // 判断输入框中是否输入手机号
  52.       if (!value) {
  53.         callback(new Error('手机号不能为空'))
  54.       }
  55.       //正则表达式进行验证手机号，从1开始，第二位是35789中的任意一位，以9数字结尾
  56.       if (!/^1[35789]\d{9}$/.test(value)) {
  57.         callback(new Error('手机号格式不正确'))
  58.       }
  59.       callback()
  60.     }
  61.     return {
  62.       btnTxt: "获取验证码",
  63.       // 是否禁用  即点击之后一段时间内无法再点击
  64.       disabled: false,
  65.       time: 0,
  66.       form: {
  67.         CellPhone: '',
  68.         VerificationCode: '',
  69.       },
  70.       rules: {
  71.         CellPhone: [
  72.           { required: true, trigger: 'blur', message: '请输入11位手机号'},
  73.           { required: true, trigger: 'blur', min: 11, max: 11, message: '长度不符合'},
  74.           { required: true, trigger: 'blur', validator: validatePhone}
  75.         ],
  76.         VerificationCode: [
  77.           { required: true, trigger: 'blur', message: '请输入4位验证码'},
  78.           { required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}
  79.         ],
  80.       }
  81.     }
  82.   },
  83.   methods: {
  84.     //获取手机验证码方法
  85.     getCode() {
  86.       // 校验手机号码
  87.       if (!this.form.CellPhone) {
  88.         //号码校验不通过
  89.         this.$message({
  90.           message: '请输入手机号',
  91.           type:'warning',
  92.         });
  93.         //正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
  94.       } else if (!/1[35789]\d{9}/.test(this.form.CellPhone)) {
  95.         // 失去焦点后自动触发校验手机号规则
  96.       } else {
  97.         this.time = 60;
  98.         this.disabled = true;
  99.         //调用倒计时方法
  100.         this.timer();
  101.         // 封装的axios接口
  102.         GetPhone({
  103.           CellPhone: this.form.CellPhone,
  104.         }) .then(({data}) => {
  105.           if (data.code === 200) {
  106.             this.$message({
  107.               message: '验证成功',
  108.               type: 'success',
  109.             })
  110.           } else {
  111.             this.$message({
  112.               message: '发送失败',
  113.               type: 'warning',
  114.             })
  115.           }
  116.         })
  117.       }
  118.     },
  119.     // 倒计时方法
  120.     timer() {
  121.       if (this.time > 0) {
  122.         this.time--;
  123.         // console.log(this.time);
  124.         this.btnTxt = this.time + "s后重新获取验证码";
  125.         setTimeout(this.timer, 1000);
  126.       } else {
  127.         this.time = 0;
  128.         this.btnTxt = "获取验证码";
  129.         this.disabled = false;
  130.       }
  131.     },
  132.     // 提交按钮
  133.     submit() {
  134.       this.getCode(({data}) => {
  135.         if (data.code === 200) {
  136.           this.$router.push('/')
  137.         } else {
  138.           this.$message.error(data.data.rules.message)
  139.         }
  140.       })
  141.     }
  142.   }
  143. }
  144. </script>
  145.  
  146. <style lang="less" scoped>
  147. .login-container {
  148.   width: 450px;
  149.   border:1px solid #eaeaea;
  150.   margin: 180px auto;
  151.   padding: 35px 35px 15px 35px;
  152.   border-radius: 15px;
  153.   box-shadow: 0 0 25px #cac6c6;
  154.   background-color: #ffffff;
  155.   box-sizing: border-box;
  156.   /deep/ .el-input__inner {
  157.     width: 120%;
  158.     border: 0px;
  159.     border-bottom: 1px solid;
  160.   }
  161.    .el-button {
  162.     border: 0px;
  163.     margin: -80px;
  164.     .span {
  165.       margin-left: 50px;
  166.     }
  167.   }
  168.   .login_title {
  169.     text-align: center;
  170.     margin-bottom: 40px;
  171.     color: #505458;
  172.   }
  173.   .el-input {
  174.     width: 198px;
  175.   }
  176.   .login_button {
  177.     margin-left: 105px;
  178.     margin-top: 10px;
  179.   }
  180.   .time {
  181.     width: 50px;
  182.   }
  183. }
  184.  
  185. </style>

 若有不足或错误之处，欢迎指点

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/133079
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号