自定义表单验证

html结构

    <div class="flex">
      <div class="sec-basic-item flex-one">
        <div class="sec-basic-item-title"><span class="color-red">*</span><span>身份证号码：</span></div>
        <div class="form-validate flex-one" :class="{ 'ant-form-item-has-error': rules.cert.isError }">
          <a-input class="flex-one" v-model:value="basicInfo.cert" @blur="validate('cert')"></a-input>
          <div class="form-validate-text">{{ rules.cert.description }}</div>
        </div>
      </div>
      <div class="sec-basic-item flex-one">
        <div class="sec-basic-item-title"><span class="color-red">*</span><span>联系方式：</span></div>
        <div class="form-validate flex-one" :class="{ 'ant-form-item-has-error': rules.mobile.isError }">
          <a-input class="flex-one" v-model:value="basicInfo.mobile" @blur="validate('mobile')"></a-input>
          <div class="form-validate-text">{{ rules.mobile.description }}</div>
        </div>
      </div>
    </div>

样式结构

.sec-basic-item {
  position: relative;
  display: flex;
  font-size: 15px;
  margin-bottom: 18px;
  margin-right: 10px;
  padding-left: 10px;

  &:last-child {
    margin-right: 0;
  }

  >.color-red {
    position: absolute;
    left: 0;
  }

  .sec-basic-item-title {
    width: 145px;
    text-align: right;
    line-height: 34px;
  }

  .form-validate {
    position: relative;

    .form-validate-text {
      position: absolute;
      display: none;
      left: 0;
      top: 100%;
      margin-top: 0px;
      font-size: 13px;
      color: #ff303c;
    }

    &.ant-form-item-has-error .form-validate-text {
      display: block;
    }
  }
}

script结构

let rules = ref<any>({
  name: {
    rule: [{ type: 'required', text: '请输入姓名' }],
    isError: false,
    description: '',
  },
  sex: {
    rule: [{ type: 'required', text: '请选择性别' }],
    isError: false,
    description: '',
  },
  cert: {
    rule: [
      { type: 'required', text: '请输入身份证号' },
      {
        type: 'other',
        value:
          /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/g,
        text: '身份证号码输入不正确',
      },
    ],
    isError: false,
    description: '',
  },
  mobile: {
    rule: [
      { type: 'required', text: '请输入联系方式' },
      {
        type: 'other',
        value: /(^0[1-9]{1}\d{8,10}$)|(^1[3,4,5,6,7,8,9]\d{9}$)/g,
        text: '请输入正确的固话或手机号码',
      },
    ],
    isError: false,
    description: '',
  },
});
// 验证
function validate(k) {
  let bool = true;
  for (let key in rules.value) {
    if (k == 'all' || k == key) {
      for (let i = 0; i < rules.value[key].rule.length; i++) {
        let r = rules.value[key].rule[i];
        rules.value[key].isError = false;
        rules.value[key].description = '';
        if (r.type == 'required' && !basicInfo.value[key] && basicInfo.value[key] !== 0) {
          bool = false;
          rules.value[key].isError = true;
          rules.value[key].description = r.text;
          break;
        } else if (r.type == 'min' && basicInfo.value[key].length < r.value) {
          bool = false;
          rules.value[key].isError = true;
          rules.value[key].description = r.text;
          break;
        } else if (r.type == 'max' && basicInfo.value[key].length > r.value) {
          bool = false;
          rules.value[key].isError = true;
          rules.value[key].description = r.text;
          break;
        } else if (r.type == 'other') {
          let reg = new RegExp(r.value);
          if (!reg.test(basicInfo.value[key])) {
            bool = false;
            rules.value[key].isError = true;
            rules.value[key].description = r.text;
          }
        }
      }
    }
  }
  return bool;
}