antd vue 这里表单校验全填了为什么校验不过

Z时代
2024-02-29
分类：IT

症状就是，不填它会跳红字让你填，全填了，它就只走到 console.log('sub') 去掉isPhone校验就好了请问哪里错了，谢谢

<template>
  <div>
    <page-header-wrapper>
      <template v-slot:extra>
        <a-button @click="$router.go(-1)">
          <a-icon type="swap-left" />{{ $t('back') }}</a-button>
      </template>
      <a-card>
        <div class="form-wrapper">
          <a-descriptions title="基础信息"></a-descriptions>
          <a-form-model ref="ruleForm" layout="inline" :model="form" :rules="rules" :labelCol="{ style: 'width: 110px' }">
            <a-row :gutter="20">
              <a-col :md="8" :sm="24">
                <a-form-model-item label="客户编号:" prop="number">
                  <a-input v-model="form.number" />
                </a-form-model-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-model-item label="客户分类:" prop="classFy">
                  <a-select v-model="form.classFy">
                    <a-select-option value="123">12333</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-model-item label="客户名称:" prop="clientName">
                  <a-input v-model="form.clientName" />
                </a-form-model-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-model-item label="客户生日">
                  <a-date-picker v-model="form.birthday" style="width: 100%" />
                </a-form-model-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-model-item label="联系电话:" prop="phone">
                  <a-input v-model="form.phone" />
                </a-form-model-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-model-item label="最晚付款天数:" prop="payDate">
                  <a-date-picker v-model="form.payDate" style="width: 100%" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <div>
              <a-form-model-item label="详细地址:">
                <a-input v-model="form.detailLocation" />
              </a-form-model-item>
            </div>
            <div>
              <a-form-model-item label="备注:">
                <a-textarea v-model="form.remark" />
              </a-form-model-item>
            </div>
          </a-form-model>
        </div>
        <div class="bot">
          <div class="btns">
            <a-button type="primary" @click="onSubmit">保存</a-button>
          </div>
        </div>
      </a-card>
    </page-header-wrapper>
  </div>
</template>
<script>
  import {
    isPhone
  } from "@/utils/check"
  export default {
    components: {},
    data() {
      return {
        form: {
          number: '',
          classFy: '',
          clientName: '',
          birthday: '',
          phone: '',
          payDate: '',
          detailLocation: '',
          remark: ''
        },
        rules: {
          number: [{
            required: true,
            message: '请输入客户编号'
          }],
          classFy: [{
            required: true,
            message: '请输入客户分类'
          }],
          clientName: [{
            required: true,
            message: '请输入客户名称'
          }],
          phone: [{
            required: true,
            message: '请输入联系方式'
          }, {
            validator: isPhone,
            trigger: "blur"
          }],
          payDate: [{
            required: true,
            message: '请输入最晚付款日期'
          }]
        }
      }
    },
    mounted() {},
    methods: {
      onSubmit() {
        console.log('sub')
        this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .bot {
    width: 100%;
    display: felx;
    .btns {
      margin: 0 auto;
      width: 15%;
      padding-top: 20px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
export const isPhone = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('手机号不能为空'))
  } else if (!/^1\d{10}$/.test(value)) {
    callback(new Error('手机号格式错误'))
  }
}

回答：

看了下你补充的内容，你似乎在正确的时候没 callback()


const isPhone = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('Please input the phone'));
    } else {
      if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(value))){
        callback(new Error('手机号不正确'));
      }
      callback()
    }
  }