手机号校验

src/views/personalCenter/registration.vue

 <template>
   <div class="resetPwdList">
-    <nav-list></nav-list>
-<!--    <com-layout-wrapper class="resetPwd">-->
+    <nav-list />
+    <!--    <com-layout-wrapper class="resetPwd">-->
 
     <div class="tab-container">
-      <img style="width: 600px; margin: 0px 180px 0px 0px" src="@/assets/loginImage/loginBiaoyu.png" />
+      <img style="width: 600px; margin: 0px 180px 0px 0px" src="@/assets/loginImage/loginBiaoyu.png">
       <el-form
-          style="background-color:#ffffff; border: 1px solid #c8c9cc; padding: 20px 20px 20px 20px; width: 400px; border-radius: 5px"
-          ref="resetPasswordForm"
-          class="resetPasswordForm"
-          :model="resetPasswordForm"
-          :rules="resetPasswordFormRules"
-          label-width="100px"
+        ref="resetPasswordForm"
+        style="background-color:#ffffff; border: 1px solid #c8c9cc; padding: 20px 20px 20px 20px; width: 400px; border-radius: 5px"
+        class="resetPasswordForm"
+        :model="resetPasswordForm"
+        :rules="resetPasswordFormRules"
+        label-width="100px"
       >
         <h3 style="text-align: center; font-size: 20px">个人用户注册</h3>
         <el-form-item label="登录名" prop="userName">
           <el-input
-              v-model="resetPasswordForm.userName"
-              type="text"
-              placeholder="请输入登录名"
+            v-model="resetPasswordForm.userName"
+            type="text"
+            placeholder="请输入登录名"
           />
         </el-form-item>
         <el-form-item label="密码" prop="password">
           <el-input
-              v-model.trim="resetPasswordForm.password"
-              type="password"
-              placeholder="请输入您的密码"
+            v-model.trim="resetPasswordForm.password"
+            type="password"
+            placeholder="请输入您的密码"
           />
         </el-form-item>
         <el-form-item label="重复密码" prop="confirmedPassword">
           <el-input
-              v-model.trim="resetPasswordForm.confirmedPassword"
-              type="password"
-              placeholder="请再次输入您的密码"
+            v-model.trim="resetPasswordForm.confirmedPassword"
+            type="password"
+            placeholder="请再次输入您的密码"
           />
         </el-form-item>
         <el-form-item label="联系电话" prop="phonenumber">
-<!--          <el-input-->
-<!--              onkeyup="value=value.replace(/[^\d]/g, '')"-->
-<!--              v-model="resetPasswordForm.phonenumber"-->
-<!--              maxlength="11"-->
-<!--              type="text"-->
-<!--              placeholder="请输入联系电话"-->
-<!--          />-->
+          <!--          <el-input-->
+          <!--              onkeyup="value=value.replace(/[^\d]/g, '')"-->
+          <!--              v-model="resetPasswordForm.phonenumber"-->
+          <!--              maxlength="11"-->
+          <!--              type="text"-->
+          <!--              placeholder="请输入联系电话"-->
+          <!--          />-->
           <el-input
-              class="delInput"
-              v-model="resetPasswordForm.phonenumber"
-              maxlength="11"
-              type="number"
-              oninput="if(value.length>11)value=value.slice(0,11)"
-              placeholder="请输入联系电话"
-          ></el-input>
+            v-model="resetPasswordForm.phonenumber"
+            class="delInput"
+            maxlength="11"
+            type="number"
+            oninput="if(value.length>11)value=value.slice(0,11)"
+            placeholder="请输入联系电话"
+          />
         </el-form-item>
         <el-form-item label="邮箱地址" prop="email">
           <el-input
-              v-model="resetPasswordForm.email"
-              maxlength="50"
-              show-word-limit
-              placeholder="请输入您的邮箱地址"
+            v-model="resetPasswordForm.email"
+            maxlength="50"
+            show-word-limit
+            placeholder="请输入您的邮箱地址"
           />
         </el-form-item>
         <div>
@@ -71,7 +71,7 @@
       </el-form>
     </div>
 
-<!--    </com-layout-wrapper>-->
+    <!--    </com-layout-wrapper>-->
   </div>
 </template>
 
@@ -112,6 +112,18 @@ export default {
         }
       }
     }
+    var checkPhone = (rule, value, callback) => { // 手机号验证
+      if (!value) {
+        return callback(new Error('手机号不能为空'))
+      } else {
+        const reg = /^1[3456789]\d{9}$/
+        if (reg.test(value)) {
+          callback()
+        } else {
+          return callback(new Error('请输入正确的手机号'))
+        }
+      }
+    }
     return {
       // 确认密码
       resetPasswordForm: {
@@ -131,7 +143,8 @@ export default {
           { required: true, validator: confirmPasswordValidator, trigger: 'blur' }
         ],
         phonenumber: [
-          { required: true, message: '请输入联系电话', trigger: 'blur' }
+          { required: true, message: '请输入联系电话', trigger: 'blur' },
+          { required: true, validator: checkPhone, trigger: 'blur' }
         ],
         email: [
           { required: true, message: '请输入邮箱地址', trigger: 'blur' },