限制用户管理联系电话只能输入正整数

new_backstage/src/pages/system/user/componets/manage.vue

@@ -3,44 +3,75 @@
     <div class="formtop">
       <div class="left">
         <el-form-item label="身份码：" prop="userName">
-          <el-input :disabled="id!='none'" :maxlength="INPUTLENGTH" show-word-limit v-model="form.userName"></el-input>
+          <el-input
+            :disabled="id != 'none'"
+            :maxlength="INPUTLENGTH"
+            show-word-limit
+            v-model="form.userName"
+          ></el-input>
         </el-form-item>
 
         <el-form-item label="用户昵称：" prop="nickName">
-          <el-input v-model="form.nickName" :maxlength="INPUTLENGTH" show-word-limit></el-input>
+          <el-input
+            v-model="form.nickName"
+            :maxlength="INPUTLENGTH"
+            show-word-limit
+          ></el-input>
         </el-form-item>
 
         <el-form-item label="单位名称：" prop="unit">
-          <el-input v-model="form.unit" :maxlength="INPUTLENGTH" show-word-limit></el-input>
+          <el-input
+            v-model="form.unit"
+            :maxlength="INPUTLENGTH"
+            show-word-limit
+          ></el-input>
         </el-form-item>
 
         <el-form-item label="联系电话：" prop="phone">
-          <el-input maxlength="11" show-word-limit v-model.number="form.phone"></el-input>
+          <el-input
+            @input="changeInput"
+            maxlength="11"
+            show-word-limit
+            v-model.number="form.phone"
+          ></el-input>
         </el-form-item>
 
-        <el-form-item label="是否启用：" v-if="form.roleKey!='sys_admin'">
-          <el-switch v-model="form.isEnabled" > </el-switch>
+        <el-form-item label="是否启用：" v-if="form.roleKey != 'sys_admin'">
+          <el-switch v-model="form.isEnabled"> </el-switch>
         </el-form-item>
       </div>
       <div class="right">
         <el-form-item label="用户角色：" prop="roleId">
           <el-input v-model="form.roleId" class="fadeDom"></el-input>
-          <el-select v-model="form.roleId" placeholder="请选择" style="width:100%">
+          <el-select
+            v-model="form.roleId"
+            placeholder="请选择"
+            style="width: 100%"
+          >
             <el-option
               v-for="item in roleList"
               :key="item.id"
               :label="item.roleName"
-              :value="item.id">
+              :value="item.id"
+            >
             </el-option>
           </el-select>
         </el-form-item>
 
         <el-form-item label="真实姓名：" prop="realName">
-          <el-input v-model="form.realName" :maxlength="INPUTLENGTH" show-word-limit></el-input>
+          <el-input
+            v-model="form.realName"
+            :maxlength="INPUTLENGTH"
+            show-word-limit
+          ></el-input>
         </el-form-item>
 
         <el-form-item label="通讯地址：" prop="address">
-          <el-input v-model="form.address" :maxlength="INPUTLENGTH" show-word-limit></el-input>
+          <el-input
+            v-model="form.address"
+            :maxlength="INPUTLENGTH"
+            show-word-limit
+          ></el-input>
         </el-form-item>
 
         <el-form-item label="性别：" prop="sex">
@@ -49,69 +80,76 @@
             <el-radio :label="1">女</el-radio>
           </el-radio-group>
         </el-form-item>
-        
       </div>
     </div>
 
-    <div class="formbom" v-if="id!='none'">
-        <el-form-item>
-          <el-button @click="resetPass" type="primary" class="reset" size="mini">重置密码</el-button>
-        </el-form-item>
+    <div class="formbom" v-if="id != 'none'">
+      <el-form-item>
+        <el-button @click="resetPass" type="primary" class="reset" size="mini"
+          >重置密码</el-button
+        >
+      </el-form-item>
     </div>
-  
   </div>
 </template>
 
 <script>
-
-import {resetPass} from "@/configue/api";
-
+import { resetPass } from "@/configue/api";
 
 export default {
-  props: ["data", "rule","roleList"],
+  props: ["data", "rule", "roleList"],
   data() {
     return {
-      id:this.$route.params.id,
+      id: this.$route.params.id,
       form: this.data,
       radio: "选中且禁用",
       thumbUrl: this.$serverName + "cms/goods/upload/thumb",
       fileUrl: this.$serverName + "cms/goods/upload/model",
     };
   },
-  methods:{
-    resetPass(){
+  methods: {
+    resetPass() {
       this.confirm("该操作将重置此用户密码，是否继续？", () => {
-        resetPass({id:this.id},()=>{
+        resetPass({ id: this.id }, () => {
           this.$alert("重置成功（默认密码123456）", "提示", {
-              confirmButtonText: "确定",
-              callback: () => {
-                window.reload()
-              },
-            });
-        })
+            confirmButtonText: "确定",
+            callback: () => {
+              window.reload();
+            },
+          });
+        });
       });
-      
-    }
-  }
+    },
+    //投票数量只能输入正整数
+    changeInput() {
+      let pattern = /^[1-9][0-9]*$/; //正整数的正则表达式
+      //不符合正整数时
+      if (!pattern.test(this.form.phone)) {
+        //input框绑定的内容非数字的全部置为空
+        this.form.phone = this.form.phone.replace(/[^\d]/g, "");
+      }
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .formcon {
   width: 100%;
-  .formtop,.formbom{
+  .formtop,
+  .formbom {
     width: 100%;
     display: flex;
     justify-content: flex-start;
     position: relative;
-    >div{
+    > div {
       width: 40%;
-      &:first-of-type{
+      &:first-of-type {
         margin-right: 5%;
       }
     }
   }
-  .formbom{
+  .formbom {
     align-items: center;
   }
 }