(vue)手机和邮箱同时校验及文本域字数行数限制

(vue)手机和邮箱同时校验及文本域字数行数限制

---

代码：

<el-form
     :model="ruleForm"
     :rules="rules"
     ref="ruleForm"
     label-width="80px"
     :hide-required-asterisk="hideRequired"
   >
     <el-form-item label=" ">
       <el-input v-model="ruleForm.phoneNumber" placeholder="请输入您的电话/邮箱"></el-input>
     </el-form-item>
     <el-form-item label=" " class="formArea">
       <el-input
         type="textarea"
         placeholder="请输入您想咨询的问题(选填)"
         v-model="ruleForm.problem"
         maxlength="200"
         show-word-limit
         :rows="4"
       ></el-input>
     </el-form-item>
     <el-form-item>
       <el-button
         type="primary"
         round
         class="button2 formBtn"
         @click="submitForm('ruleForm')"
       >提交</el-button>
     </el-form-item>
   </el-form>

js:

data(){
	return {
	  hideRequired: true, //必填星号标识
      ruleForm: {
        phoneNumber: " ",
        problem: " ",
      },
      rules: {
        phoneNumber: [
          { required: true, message: "请输入您的 电话/邮箱", trigger: "blur" },
          //   { validator: validatePhone, trigger: "blur" },//单个校验适合这种
        ],
        problem: [
          { required: true, message: "请填写活动形式", trigger: "blur" },
        ],
      },
	}
}


//提交
submitForm(formName) {
  let testStr = this.ruleForm.phoneNumber;
  var regPhone = /^[1][3-9][0-9]{9}$/; //手机正则
  var regEMail = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/; //邮箱正则
  console.log(!regPhone.test(testStr)); //手机正确时此值为false
  console.log(!regEMail.test(testStr)); //邮箱正确时此值为false
  if (
    !regPhone.test(testStr) &&
    !regEMail.test(testStr) &&
    testStr != ""
  ) {
    this.$message({
      message: "请输入正确的电话/邮箱",
      type: "warning",
    });
  } else {
	...
  }
}