vue 手机号码校验 elment校验 简单校验 提交校验

            <el-form
              :model="shipmentFormal"
              label-width="180px"
              class="query"
              :inline="true"
              :rules="rules"
              style="background-color: #fff; border: 1px solid #eaeaea"
              label-position="right"
            >
              <el-form-item label="提货日期：" prop="takeDate">
                <el-date-picker 
                v-model="shipmentFormal.takeDate" 
                type="date" 
                placeholder="" 
                :disabled="isEdit != '1'">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="预计送达时间：" prop="takeArriveDate">
                <el-date-picker
                  v-model="shipmentFormal.takeArriveDate"
                  type="date"
                  placeholder=""
                  :disabled="isEdit != '1'"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="提货人：" prop="takePerson">
                <el-input
                  type="textarea"
                  v-model="shipmentFormal.takePerson"
                  resize="none"
                  autosize
                  :disabled="isEdit != '1'"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系电话：" prop="takePhone">
                <el-input
                  type="textarea"
                  v-model="shipmentFormal.takePhone"
                  resize="none"
                  autosize
                  :disabled="isEdit != '1'"
                ></el-input>
              </el-form-item>
            </el-form>

data(){
	return{
		//trigger: 'blur'值改变提示 change 直接提示
		//注意：prop="takePhone" 值要和 v-model值一样
		rules: {
        takeDate: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
        takeArriveDate: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
        takePerson: [{ required: true, message: '请输入提货人', trigger: 'change' }],
        takePhone: [
          { required: true, message: '手机号码不能为空', trigger: 'change' },
          {
            pattern: /^[1]([3-9])[0-9]{9}$/,
            message: '请正确输入11位手机号码',
            trigger: 'blur'
          }
        ]
      },
	}
}


    async saveSubmit(num) { 
      if (!this.returnFn()) {
        return //校验不成功打断
      }
      console.log('校验成功后的操作')
    },
    returnFn() { //校验函数
      if (['', null, undefined].includes(this.shipmentFormal.takeDate)) {
        return false
      }
      if (['', null, undefined].includes(this.shipmentFormal.takeArriveDate)) {
        return false
      }
      if (['', null, undefined].includes(this.shipmentFormal.takePerson)) {
        return false
      }
      if (!/^[1]([3-9])[0-9]{9}$/.test(this.shipmentFormal.takePhone)) {
        return false
      }
      return true
    },