手机号正则校验

pages/staff/editStaff/addUser.vue

@@ -8,22 +8,40 @@
       <form>
         <view class="cu-form-group">
           <view class="title">姓名</view>
-					<input :maxlength="8" @input="getChinese" :value="userInfo.cUserName" @blur="showChinese" placeholder="请输入姓名" name="input" />
+          <input
+            :maxlength="8"
+            @input="getChinese"
+            :value="userInfo.cUserName"
+            @blur="showChinese"
+            placeholder="请输入姓名"
+            name="input"
+          />
         </view>
         <view class="cu-form-group">
           <view class="title">手机号</view>
-					<input type="number" v-model="userInfo.phone" placeholder="请输入手机号" name="input" />
+          <input
+            type="number"
+            :maxlength="11"
+            v-model="userInfo.phone"
+            placeholder="请输入手机号"
+            name="input"
+          />
         </view>
 
         <view class="cu-form-group text-right">
           <view class="title">权限设置</view>
           <view class>请选择以下权限</view>
         </view>
-				<view class=" padding bg-white ">
+        <view class="padding bg-white">
           <checkbox-group @change="checkboxChange" class="flex flex-wrap justify-between">
             <view class="basis-sm margin-bottom-sm" v-for="(item,index) in checkbox" :key="index">
-							<checkbox @tap="item.checked=!item.checked" class="round red" :class="item.checked?'checked':''" :checked="item.checked?true:false"
+              <checkbox
-							 :value="item.value"></checkbox>
+                @tap="item.checked=!item.checked"
+                class="round red"
+                :class="item.checked?'checked':''"
+                :checked="item.checked?true:false"
+                :value="item.value"
+              ></checkbox>
               <text class="padding-left-xs">{{item.name}}</text>
             </view>
           </checkbox-group>
@@ -33,7 +51,9 @@
         <view class="text-lg">添加说明</view>
         <view class="padding-top-sm text-sm text-grey">
           <view class="margin-bottom-xs">1、员工添加成功后，系统会向该员工发送一条短信，短信中包含了云站的识别码。</view>
-					<view class="margin-bottom-xs">2、用户在收到短信后，需要关注“星油云站公众号”，进入小程序，输入云站编码后，根据页面要求输入对应的手机号，姓名，身份证信息，与管理员添加的信息一致方可绑定成功。</view>
+          <view
+            class="margin-bottom-xs"
+          >2、用户在收到短信后，需要关注“星油云站公众号”，进入小程序，输入云站编码后，根据页面要求输入对应的手机号，姓名，身份证信息，与管理员添加的信息一致方可绑定成功。</view>
           <view class>3、绑定成功后无需再次登录操作。</view>
         </view>
       </view>
@@ -45,8 +65,8 @@
 </template>
 
 <script>
-	import staffApi from '@/api/staff.js'
+import staffApi from '@/api/staff.js'
-	export default {
+export default {
   data() {
     return {
       tempUid: uni.getStorageSync('tempUid'),
@@ -66,6 +86,7 @@
     }
   },
   methods: {
+
     showChinese() {
       const reg = /[\u4e00-\u9fa5]/g
       var names = this.userInfo.cUserName.match(reg);
@@ -153,6 +174,12 @@
           icon: 'none'
         })
         return false
+      } else if (!/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1})|(16[0-9]{1}))+\d{8})$/.test(this.userInfo.phone)) {
+        uni.showToast({
+          title: '手机号码不正确',
+          icon: 'none'
+        })
+        return false
       }
       this.calcMenuList()
       const data4 = {
@@ -163,11 +190,9 @@
         pushState: 1,
         pushProcedureState: 1
       }
-				if (this.tempUid.type === 'add') {
+
       this.addUser(data4)
-				} else if (this.tempUid.type === 'edit') {
+
-					this.updateUser(data4)
-				}
     },
     getAllMenu() {
       staffApi.getOilSiteAllMenu(this.tempUid.id).then(res => {
@@ -204,7 +229,7 @@
       })
     }
   }
-	}
+}
 </script>
 
 <style scoped>