修改表单校验

pagesme/me/updateBasicInformation.vue

@@ -9,21 +9,24 @@
           labelPosition="left"
           :model="userInfo"
           labelWidth="90"
+          ref="uForm"
+          :rules="rules"
       >
         <u-form-item
             label="手机号"
-            prop="userInfo.memPhone"
+            prop="memPhone"
             borderBottom
         >
           <u--input
               v-model="userInfo.memPhone"
               border="none"
               placeholder="请输入手机号"
+              maxlength="11"
           ></u--input>
         </u-form-item>
         <u-form-item
             label="微信号"
-            prop="userInfo.memWxCode"
+            prop="memWxCode"
             borderBottom
         >
           <u--input
@@ -34,7 +37,7 @@
         </u-form-item>
         <u-form-item
             label="民族"
-            prop="userInfo.memNationText"
+            prop="form.memNationText"
             borderBottom
             @click="showNation = true; hideKeyboard()"
         >
@@ -52,7 +55,7 @@
         </u-form-item>
         <u-form-item
             label="昵称"
-            prop="userInfo.memNickName"
+            prop="memNickName"
             borderBottom
         >
           <u--input
@@ -63,7 +66,7 @@
         </u-form-item>
         <u-form-item
             label="性别"
-            prop="userInfo.memSex"
+            prop="form.memSexText"
             borderBottom
             @click="showSex = true; hideKeyboard()"
         >
@@ -81,7 +84,7 @@
         </u-form-item>
         <u-form-item
             label="生日"
-            prop="userInfo.memBirthday"
+            prop="memBirthday"
             borderBottom
             @click="showBirthday = true; hideKeyboard()"
         >
@@ -99,7 +102,7 @@
         </u-form-item>
         <u-form-item
             label="星座"
-            prop="userInfo.memConstellation"
+            prop="form.memConstellationText"
             borderBottom
         >
           <u--input
@@ -112,7 +115,7 @@
         </u-form-item>
         <u-form-item
             label="身高"
-            prop="userInfo.memHeight"
+            prop="memHeight"
             borderBottom
         >
           <u--input
@@ -120,12 +123,15 @@
               disabledColor="#ffffff"
               placeholder="请输入身高"
               border="none"
+              type="digit"
+              maxlength="3"
+              @input="limitHeightNum"
           ></u--input>
           <span slot="right">cm</span>
         </u-form-item>
         <u-form-item
             label="体重"
-            prop="userInfo.memWeight"
+            prop="memWeight"
             borderBottom
         >
           <u--input
@@ -133,12 +139,15 @@
               disabledColor="#ffffff"
               placeholder="请输入体重"
               border="none"
+              type="digit"
+              maxlength="3"
+              @input="limitWeightNum"
           ></u--input>
           <span slot="right">kg</span>
         </u-form-item>
         <u-form-item
             label="教育经历"
-            prop="userInfo.memMaxEducation"
+            prop="form.memMaxEducationText"
             borderBottom
             @click="showEducation = true; hideKeyboard()"
         >
@@ -156,7 +165,7 @@
         </u-form-item>
         <u-form-item
             label="毕业院校"
-            prop="userInfo.memCollege"
+            prop="memCollege"
             borderBottom
         >
           <u--input
@@ -167,7 +176,7 @@
         </u-form-item>
         <u-form-item
             label="职业"
-            prop="userInfo.memCareer"
+            prop="memCareer"
             borderBottom
         >
           <u--input
@@ -178,7 +187,7 @@
         </u-form-item>
         <u-form-item
             label="年收入"
-            prop="userInfo.memYearIncome"
+            prop="memYearIncome"
             borderBottom
         >
           <u--input
@@ -190,7 +199,7 @@
         </u-form-item>
         <u-form-item
             label="工作单位"
-            prop="userInfo.memWorkPlace"
+            prop="memWorkPlace"
             borderBottom
         >
           <u--input
@@ -201,7 +210,7 @@
         </u-form-item>
         <u-form-item
             label="居住地"
-            prop="userInfo.memResidenceProvince"
+            prop="form.memResidence"
             borderBottom
             @click="showResidence = true; hideKeyboard()"
         >
@@ -219,7 +228,7 @@
         </u-form-item>
         <u-form-item
             label="籍贯"
-            prop="userInfo.memResidenceCity"
+            prop="form.memNative"
             borderBottom
             @click="showNative = true; hideKeyboard()"
         >
@@ -237,40 +246,40 @@
         </u-form-item>
         <u-form-item
             label="自我介绍"
-            prop="userInfo.memIntroduce"
+            prop="memIntroduce"
             borderBottom
         >
           <u--textarea v-model="userInfo.memIntroduce" placeholder="请输入自我介绍"></u--textarea>
         </u-form-item>
         <u-form-item
             label="兴趣爱好"
-            prop="userInfo.memHobby"
+            prop="memHobby"
             borderBottom
         >
           <u--textarea v-model="userInfo.memHobby" placeholder="请输入兴趣爱好" ></u--textarea>
         </u-form-item>
         <u-form-item
             label="未来规划"
-            prop="userInfo.memFuturePlan"
+            prop="memFuturePlan"
             borderBottom
         >
           <u--textarea v-model="userInfo.memFuturePlan" placeholder="请输入未来规划" ></u--textarea>
         </u-form-item>
         <u-form-item
             label="期待"
-            prop="userInfo.memHalfDesire"
+            prop="memHalfDesire"
             borderBottom
         >
           <u--textarea v-model="userInfo.memHalfDesire" placeholder="请输入期待" ></u--textarea>
         </u-form-item>
         <u-form-item
             label="婚姻状况"
-            prop="userInfo.memMarriage"
+            prop="form.memMarriageText"
             borderBottom
             @click="showMarriage = true; hideKeyboard()"
         >
           <u--input
-              v-model="userInfo.memMarriage"
+              v-model="form.memMarriageText"
               disabled
               disabledColor="#ffffff"
               placeholder="请选择婚姻状况"
@@ -283,7 +292,7 @@
         </u-form-item>
         <u-form-item
             label="婚姻状况备注"
-            prop="userInfo.memMarriageRemarks"
+            prop="memMarriageRemarks"
             borderBottom
         >
           <u--input
@@ -294,7 +303,7 @@
         </u-form-item>
         <u-form-item
             label="16型人格"
-            prop="userInfo.memMbti"
+            prop="memMbti"
             borderBottom
         >
           <u--input
@@ -316,18 +325,12 @@
           customStyle="margin-top: 10px;margin-bottom:50px"
           @click="reset"
       ></u-button>
-      <u-code
-          ref="uCode"
-          @change="codeChange"
-          seconds="20"
-          @start="disabled1 = true"
-          @end="disabled1 = false"
-      ></u-code>
 <!--      生日-->
       <u-datetime-picker
           :show="showBirthday"
-          :value="birthday"
           mode="date"
+          :minDate="-1420070400000"
+          :maxDate="birthday"
           closeOnClickOverlay
           @confirm="confirmBirthday"
           @cancel="showBirthday=false"
@@ -423,20 +426,13 @@ export default {
         }]
       ],
       //选择器
-      showAge: false,
       showSex: false,
-      showHeight: false,
-      showCalendar: false,
       showBirthday: false,
       showEducation: false,
-      showCareer: false,
       showMarriage:false,
       showNation:false,
       showResidence: false,
       showNative: false,
-      disabled1: false,
-      tips: '',
-      value: '',
       userInfo: {
         nickname:'',//昵称
         memPhone:'',//手机号
@@ -467,158 +463,220 @@ export default {
       form:{},
       birthday: Number(new Date()),
       rules: {
-        'userInfo.name': [{
-          type: 'string',
-          required: true,
-          message: '请填写姓名',
-          trigger: ['blur', 'change']
-        }, {
-          // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
-          validator: (rule, value, callback) => {
-            // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
-            return uni.$u.test.chinese(value);
+        memPhone: [
+          {
+            type: 'number',
+            required: true,
+            message: '请输入手机号',
+            trigger: ['blur']
           },
-          message: "姓名必须为中文",
-          // 触发器可以同时用blur和change，二者之间用英文逗号隔开
-          trigger: ["change", "blur"],
-        }],
-        code: {
-          type: 'string',
-          required: true,
-          len: 4,
-          message: '请填写4位验证码',
-          trigger: ['blur']
-        },
-        'userInfo.sex': {
-          type: 'string',
-          max: 1,
-          required: true,
-          message: '请选择男或女',
-          trigger: ['blur', 'change']
-        },
-        radiovalue1: {
-          type: 'string',
-          min: 1,
-          max: 2,
-          message: '橙子有毒',
-          trigger: ['change']
-        },
-        checkboxValue1: {
-          type: 'array',
-          min: 2,
-          required: true,
-          message: '不能太宅，至少选两项',
-          trigger: ['change']
-        },
-        intro: {
-          type: 'string',
-          min: 3,
-          required: true,
-          message: '不低于3个字',
-          trigger: ['change']
-        },
-        hotel: {
-          type: 'string',
-          min: 2,
-          required: true,
-          message: '请选择住店时间',
-          trigger: ['change']
-        },
-        'userInfo.birthday': {
-          type: 'string',
-          required: true,
-          message: '请选择生日',
-          trigger: ['change']
-        },
-      },
-      radiolist1: [{
-        name: '苹果',
-        disabled: false
-      },
-        {
-          name: '香蕉',
-          disabled: false
-        },
-        {
-          name: '毒橙子',
-          disabled: false
-        }
-      ],
-      checkboxList1: [{
-        name: '羽毛球',
-        disabled: false
-      },
-        {
-          name: '跑步',
-          disabled: false
-        },
-        {
-          name: '爬山',
-          disabled: false
-        }
-      ]
+          {
+            pattern: /^1[3-9]\d{9}$/,
+            message: '请输入正确的手机号',
+            trigger: ['blur']
+          }
+        ],
+        memWxCode: [
+          {
+            type: 'string',
+            required: true,
+            message: '请输入微信号',
+            trigger: ['blur']
+          }
+        ],
+        'form.memNationText': [
+          {
+            type: 'string',
+            required: true,
+            message: '请选择民族',
+            trigger: ['change']
+          }
+        ],
+        memNickName: [
+          {
+            type: 'string',
+            required: true,
+            message: '请输入昵称',
+            trigger: ['blur']
+          }
+        ],
+        'form.memSexText': [
+          {
+            type: 'string',
+            required: true,
+            message: '请选择性别',
+            trigger: ['change']
+          }
+        ],
+        memBirthday: [
+          {
+            type: 'string',
+            required: true,
+            message: '请选择生日',
+            trigger: ['change']
+          }
+        ],
+        memHeight: [
+          {
+            type: 'number',
+            required: true,
+            message: '请输入身高',
+            trigger: ['blur']
+          }
+        ],
+        memWeight: [
+          {
+            type: 'number',
+            required: true,
+            message: '请输入体重',
+            trigger: ['blur']
+          }
+        ],
+        'form.memMaxEducationText': [
+          {
+            type: 'string',
+            required: true,
+            message: '请选择教育经历',
+            trigger: ['change']
+          }
+        ],
+        memCollege: [
+          {
+            type: 'string',
+            required: true,
+            message: '请输入毕业院校',
+            trigger: ['blur']
+          }
+        ],
+        memYearIncome: [
+          {
+            type: 'number',
+            required: true,
+            message: '请输入年收入',
+            trigger: ['blur']
+          }
+        ],
+        'form.memResidence': [
+          {
+            type: 'string',
+            required: true,
+            message: '请选择居住地',
+            trigger: ['change']
+          }
+        ],
+        'form.memNative': [
+          {
+            type: 'string',
+            required: true,
+            message: '请选择籍贯',
+            trigger: ['change']
+          }
+        ],
+        memIntroduce: [
+          {
+            type: 'string',
+            required: true,
+            message: '请输入自我介绍',
+            trigger: ['blur']
+          }
+        ],
+        memHobby: [
+          {
+            type: 'string',
+            required: true,
+            message: '请输入兴趣爱好',
+            trigger: ['blur']
+          }
+        ],
+        memFuturePlan: [
+          {
+            type: 'string',
+            required: true,
+            message: '请输入未来规划',
+            trigger: ['blur']
+          }
+        ],
+        memHalfDesire: [
+          {
+            type: 'string',
+            required: true,
+            message: '请输入期待',
+            trigger: ['blur']
+          }
+        ],
+        'form.memMarriageText': [
+          {
+            type: 'string',
+            required: true,
+            message: '请选择婚姻状况',
+            trigger: ['change']
+          }
+        ]
+      }
     }
   },
   onReady() {
-    // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
-    // this.$refs.form1.setRules(this.rules)
-  },
-  onLoad() {
-    this.getHeight()
+    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
+    this.$refs.uForm.setRules(this.rules)
   },
   methods: {
     confirmMarriage(e){
       this.showMarriage = false
-      this.userInfo.memMarriage = e.value
+      this.userInfo.memMarriage = e.value[0].value
+      this.form.memMarriageText = e.value[0].label
     },
     confirmEducation(e){
       this.showEducation = false
-      this.userInfo.memMaxEducation = e.value
-      this.form.memMaxEducationText = e.data
+      this.userInfo.memMaxEducation = e.value[0].value
+      this.form.memMaxEducationText = e.value[0].label
     },
     confirmBirthday(e) {
       this.showBirthday = false
       this.userInfo.memBirthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
-      this.getConstellation(value)
+      console.log('this.userInfo.memBirthday',this.userInfo.memBirthday)
+      this.getConstellation(this.userInfo.memBirthday)
     },
     getConstellation (value) {
-      const month = value.getMonth() + 1 // 月份是从0开始的，+1修正
-      const day = value.getDate()
+      const [year, month, day] = value.split('-').map(Number);
+      const dateObject = new Date(year, month - 1, day); // 注意：月份需要减1，因为JS中月份是从0开始计算的
+
+      const formattedMonth = dateObject.getMonth() + 1; // 获取正确的月份，+1是因为构造Date时减了1
+      const dayInMonth = dateObject.getDate();
 
-      if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) {
-        this.form.memConstellation = 1
+      if ((formattedMonth === 1 && dayInMonth >= 20) || (formattedMonth === 2 && dayInMonth <= 18)) {
+        this.userInfo.memConstellation = 1
         this.form.memConstellationText = '水瓶座'
-      } else if ((month === 2 && day >= 19) || (month === 3 && day <= 20)) {
+      } else if ((formattedMonth === 2 && dayInMonth >= 19) || (formattedMonth === 3 && dayInMonth <= 20)) {
         this.form.memConstellation = 2
         this.form.memConstellationText = '双鱼座'
-      } else if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) {
+      } else if ((formattedMonth === 3 && dayInMonth >= 21) || (formattedMonth === 4 && dayInMonth <= 19)) {
         this.form.memConstellation = 3
         this.form.memConstellationText = '白羊座'
-      } else if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) {
+      } else if ((formattedMonth === 4 && dayInMonth >= 20) || (formattedMonth === 5 && dayInMonth <= 20)) {
         this.form.memConstellation = 4
         this.form.memConstellationText = '金牛座'
-      } else if ((month === 5 && day >= 21) || (month === 6 && day <= 20)) {
+      } else if ((formattedMonth === 5 && dayInMonth >= 21) || (formattedMonth === 6 && dayInMonth <= 20)) {
         this.form.memConstellation = 5
         this.form.memConstellationText = '双子座'
-      } else if ((month === 6 && day >= 21) || (month === 7 && day <= 22)) {
+      } else if ((formattedMonth === 6 && dayInMonth >= 21) || (formattedMonth === 7 && dayInMonth <= 22)) {
         this.form.memConstellation = 6
         this.form.memConstellationText = '巨蟹座'
-      } else if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) {
+      } else if ((formattedMonth === 7 && dayInMonth >= 23) || (formattedMonth === 8 && dayInMonth <= 22)) {
         this.form.memConstellation = 7
         this.form.memConstellationText = '狮子座'
-      } else if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) {
+      } else if ((formattedMonth === 8 && dayInMonth >= 23) || (formattedMonth === 9 && dayInMonth <= 22)) {
         this.form.memConstellation = 8
         this.form.memConstellationText = '处女座'
-      } else if ((month === 9 && day >= 23) || (month === 10 && day <= 22)) {
+      } else if ((formattedMonth === 9 && dayInMonth >= 23) || (formattedMonth === 10 && dayInMonth <= 22)) {
         this.form.memConstellation = 9
         this.form.memConstellationText = '天秤座'
-      } else if ((month === 10 && day >= 23) || (month === 11 && day <= 21)) {
+      } else if ((formattedMonth === 10 && dayInMonth >= 23) || (formattedMonth === 11 && dayInMonth <= 21)) {
         this.form.memConstellation = 10
         this.form.memConstellationText = '天蝎座'
-      } else if ((month === 11 && day >= 22) || (month === 12 && day <= 21)) {
+      } else if ((formattedMonth === 11 && dayInMonth >= 22) || (formattedMonth === 12 && dayInMonth <= 21)) {
         this.form.memConstellation = 11
         this.form.memConstellationText = '射手座'
-      } else if ((month === 12 && day >= 22) || (month === 1 && day <= 19)) {
+      } else if ((formattedMonth === 12 && dayInMonth >= 22) || (formattedMonth === 1 && dayInMonth <= 19)) {
         this.form.memConstellation = 12
         this.form.memConstellationText = '摩羯座'
       }
@@ -653,44 +711,43 @@ export default {
       // 更新城市列表为当前选中省份的城市列表
       this.$set(this.nativeActions, 1, e.value[0].children);
     },
-    formatter(day) {
-      const d = new Date()
-      let month = d.getMonth() + 1
-      const date = d.getDate()
-      if (day.month == month && day.day == date + 3) {
-        day.bottomInfo = '有优惠'
-        day.dot = true
-      }
-      return day
-    },
-    codeChange(text) {
-      this.tips = text;
-    },
-    calendarClose() {
-      this.showCalendar = false
-      this.$refs.form1.validateField('hotel')
-    },
     submit() {
-      // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
-      this.$refs.form1.validate().then(res => {
+      this.$refs.uForm.validate().then(res => {
         uni.$u.toast('校验通过')
       }).catch(errors => {
         uni.$u.toast('校验失败')
       })
     },
     reset() {
-      const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro',
-        'hotel', 'code', 'userInfo.birthday']
-      this.$refs.form1.resetFields()
-      this.$refs.form1.clearValidate()
-      setTimeout(()=>{
-        this.$refs.form1.clearValidate(validateList)
-        // 或者使用 this.$refs.form1.clearValidate()
-      },10)
+
     },
     hideKeyboard() {
       uni.hideKeyboard()
-    }
+    },
+    limitHeightNum (value) {
+      if (value) {
+        const num = parseInt(value, 10)
+        if (num < 0) {
+          this.userInfo.memHeight = 0
+        } else if (num > 250) {
+          this.userInfo.memHeight = 250
+        } else {
+          this.userInfo.memHeight = num
+        }
+      }
+    },
+    limitWeightNum (value) {
+      if (value) {
+        const num = parseInt(value, 10)
+        if (num < 0) {
+          this.userInfo.memWeight = 0
+        } else if (num > 250) {
+          this.userInfo.memWeight = 250
+        } else {
+          this.userInfo.memWeight = num
+        }
+      }
+    },
   },
 }
 </script>