修改手机号加输入框验证

src/components/Personalcenter/AccountSet.vue

@@ -30,6 +30,7 @@
           <el-input
             :placeholder="$t('Key28')"
             v-model="userInfor.real_name"
+            maxlength="50"
           ></el-input>
           <!-- 保存 -->
           <el-button
@@ -185,16 +186,18 @@
           <!-- 修改邮箱 -->
           <el-button @click="editEmail">{{ $t("Key86") }}</el-button>
         </el-form-item>
-        <!-- <el-form-item prop="phone">
+        <el-form-item prop="phone">
           <span slot="label" class="lable">
-            手机号码--记得注释掉
+            <!-- 手机号码--记得注释掉 -->
             <img src="../../assets/login/phone2.png" alt="" />
             <span>{{ $t("Key85") }}</span>
           </span>
           <el-input v-model="userInfor.phone_encrypt" :disabled="true" />
-          修改手机号--记得注释掉
-          <el-button @click="editPhone">{{ $t("Key87") }}</el-button>
-        </el-form-item> -->
+          <!-- 修改手机号--记得注释掉 -->
+          <el-button @click="editPhone">{{
+            userInfor.phone_encrypt ? $t("Key87") : "设置手机号"
+          }}</el-button>
+        </el-form-item>
         <el-form-item prop="password">
           <span slot="label" class="lable">
             <!-- 密码 -->
@@ -210,7 +213,7 @@
     </div>
     <Modifymail ref="Modifymail" />
     <Modifypassword ref="Modifypassword" />
-    <Modifyphone ref="Modifyphone" />
+    <Modifyphone ref="Modifyphone" :phone_encrypt="userInfor.phone_encrypt" />
   </div>
 </template>
 

src/components/common/Modifyphone.vue

@@ -10,7 +10,7 @@
       <div class="registration2">
         <div class="form">
           <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
-            <el-form-item prop="phone_old">
+            <el-form-item prop="phone_old" v-if="phone_encrypt">
               <span slot="label" class="lable">
                 <img src="../../assets/login/singin6.png" alt="" />
                 <!-- 旧手机号 -->
@@ -18,6 +18,7 @@
               </span>
               <el-input
                 v-model.trim="ruleForm.phone_old"
+                type="number"
                 :placeholder="$t('Key97')"
               />
             </el-form-item>
@@ -28,6 +29,7 @@
               </span>
               <el-input
                 v-model.trim="ruleForm.phone_new"
+                type="number"
                 :placeholder="$t('Key98')"
               />
             </el-form-item>
@@ -40,6 +42,7 @@
               <el-input
                 style="width: 202px"
                 v-model.trim="ruleForm.verification_code"
+                type="number"
                 :placeholder="$t('Key36')"
                 maxlength="6"
               />
@@ -87,18 +90,25 @@ import { removeConfig, removeToken } from "@/utils/auth";
 export default {
   name: "Modifyphone",
   components: {},
+  props: ["phone_encrypt"],
   data() {
     var validateOld = (rule, value, callback) => {
       let _this = this;
       if (value === "") {
         callback(new Error(_this.$t("Key492"))); //请输入旧手机号
       } else {
+        let reg = /^(1(([3875][0-9])|(47)|[8][01236789]))\d{8}$/; //验证邮箱的正则
+        let phoneError = reg.test(value);
+        if (phoneError) {
+          callback();
+        } else {
+          callback(new Error("手机号格式不正确"));
+        }
         // if (value == _this.ruleForm.phone_new) {
         //   // 新旧手机号一致!
         //   callback(new Error(_this.$t("Key491")));
         // } else {
         // }
-        callback();
       }
     };
     var validateNew = (rule, value, callback) => {
@@ -107,11 +117,17 @@ export default {
         // 手机号不能为空
         callback(new Error(_this.$t("Key492")));
       } else {
-        if (_this.ruleForm.phone_old == value) {
-          //this.$refs.ruleForm.validateField("phone_old");
-          callback(new Error(_this.$t("Key491")));
+        let reg = /^(1(([3875][0-9])|(47)|[8][01236789]))\d{8}$/; //验证邮箱的正则
+        let phoneError = reg.test(value);
+        if (phoneError) {
+          if (_this.ruleForm.phone_old == value) {
+            //this.$refs.ruleForm.validateField("phone_old");
+            callback(new Error(_this.$t("Key491")));
+          } else {
+            callback();
+          }
         } else {
-          callback();
+          callback(new Error("手机号格式不正确"));
         }
       }
     };
@@ -126,12 +142,14 @@ export default {
     };
     return {
       dialogVisible: false,
+
       ruleForm: {
         phone_old: "",
         phone_new: "",
         verification_code: "",
       },
-      rules: {
+      rules: null,
+      rules2: {
         phone_old: [
           {
             validator: validateOld,
@@ -151,6 +169,20 @@ export default {
           },
         ],
       },
+      rules1: {
+        phone_new: [
+          {
+            validator: validateNew,
+            trigger: "blur",
+          },
+        ],
+        verification_code: [
+          {
+            validator: validateCode,
+            trigger: "blur",
+          },
+        ],
+      },
       VerificationCodeShow: false,
       time: 60,
       EmailError: null, //邮箱是否正确
@@ -236,7 +268,14 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    let _this = this;
+    if (_this.phone_encrypt) {
+      _this.rules = _this.rules2;
+    } else {
+      _this.rules = _this.rules1;
+    }
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

src/styles/index.scss

@@ -86,4 +86,13 @@ color:#fff;
   background: #FF9900;
   color: #fff;
 }
+}
+
+input[type='number'] {
+  -moz-appearance:textfield;
+}
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin:0;
 }

src/utils/validate.js

@@ -56,3 +56,44 @@ export function validPrice(str) {
   }
 }
 
+var validPhones = {
+  'ar-DZ': /^(\+?213|0)(5|6|7)\d{8}$/,
+  'ar-SY': /^(!?(\+?963)|0)?9\d{8}$/,
+  'ar-SA': /^(!?(\+?966)|0)?5\d{8}$/,
+  'en-US': /^(\+?1)?[2-9]\d{2}[2-9](?!11)\d{6}$/,
+  'cs-CZ': /^(\+?420)? ?[1-9][0-9]{2} ?[0-9]{3} ?[0-9]{3}$/,
+  'de-DE': /^(\+?49[ \.\-])?([\(]{1}[0-9]{1,6}[\)])?([0-9 \.\-\/]{3,20})((x|ext|extension)[ ]?[0-9]{1,4})?$/,
+  'da-DK': /^(\+?45)?(\d{8})$/,
+  'el-GR': /^(\+?30)?(69\d{8})$/,
+  'en-AU': /^(\+?61|0)4\d{8}$/,
+  'en-GB': /^(\+?44|0)7\d{9}$/,
+  'en-HK': /^(\+?852\-?)?[569]\d{3}\-?\d{4}$/,
+  'en-IN': /^(\+?91|0)?[789]\d{9}$/,
+  'en-NZ': /^(\+?64|0)2\d{7,9}$/,
+  'en-ZA': /^(\+?27|0)\d{9}$/,
+  'en-ZM': /^(\+?26)?09[567]\d{7}$/,
+  'es-ES': /^(\+?34)?(6\d{1}|7[1234])\d{7}$/,
+  'fi-FI': /^(\+?358|0)\s?(4(0|1|2|4|5)?|50)\s?(\d\s?){4,8}\d$/,
+  'fr-FR': /^(\+?33|0)[67]\d{8}$/,
+  'he-IL': /^(\+972|0)([23489]|5[0248]|77)[1-9]\d{6}/,
+  'hu-HU': /^(\+?36)(20|30|70)\d{7}$/,
+  'it-IT': /^(\+?39)?\s?3\d{2} ?\d{6,7}$/,
+  'ja-JP': /^(\+?81|0)\d{1,4}[ \-]?\d{1,4}[ \-]?\d{4}$/,
+  'ms-MY': /^(\+?6?01){1}(([145]{1}(\-|\s)?\d{7,8})|([236789]{1}(\s|\-)?\d{7}))$/,
+  'nb-NO': /^(\+?47)?[49]\d{7}$/,
+  'nl-BE': /^(\+?32|0)4?\d{8}$/,
+  'nn-NO': /^(\+?47)?[49]\d{7}$/,
+  'pl-PL': /^(\+?48)? ?[5-8]\d ?\d{3} ?\d{2} ?\d{2}$/,
+  'pt-BR': /^(\+?55|0)\-?[1-9]{2}\-?[2-9]{1}\d{3,4}\-?\d{4}$/,
+  'pt-PT': /^(\+?351)?9[1236]\d{7}$/,
+  'ru-RU': /^(\+?7|8)?9\d{9}$/,
+  'sr-RS': /^(\+3816|06)[- \d]{5,9}$/,
+  'tr-TR': /^(\+?90|0)?5\d{9}$/,
+  'vi-VN': /^(\+?84|0)?((1(2([0-9])|6([2-9])|88|99))|(9((?!5)[0-9])))([0-9]{7})$/,
+  'zh-CN': /^(1(([3875][0-9])|(47)|[8][01236789]))\d{8}$/,
+  'zh-TW': /^(\+?886\-?|0)?9\d{8}$/
+};
+
+export default {
+  validPhones: validPhones
+}