<a-form
        :labelCol="{span: 3}"
        :wrapperCol="{span: 8}"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
        :rules="rules"
        :model="personalInfo"

    >
      <!--      trigger 设置校验的触发方式 -->
<!--     name属性绑定字段名name 在表单验证时，就会找到其内部的表单组件绑定的变量personalInfo.name，的值是否符合 rules 中与 name 对应的验证规则-->
      <a-form-item
          label="用户昵称"
          name="nickName"
      >
        <a-input v-model:value="personalInfo.nickName" show-count :maxlength="5" autocomplete="off" />
      </a-form-item>
      <a-form-item label="头像" >
        <!--        修改头像-->
        <croppper-modal :personalInfo="personalInfo" @handleEmit="parentEdit"></croppper-modal>
      </a-form-item>
      <a-form-item
          label="性别"
      >
        <a-radio-group v-model:value="personalInfo.sex">
          <a-radio
              v-for="dict in sexOptions"
              :key="dict.dictValue"
              :value="dict.dictValue"
          >
            {{dict.dictLabel}}
          </a-radio>
          <!--          <a-radio value="0">男</a-radio>-->
          <!--          <a-radio value="1">女</a-radio>-->
          <!--          <a-radio value="2">保密</a-radio>-->
        </a-radio-group>
      </a-form-item>
      <a-form-item label="城市" >
        <a-cascader @change="cityChange"  v-model:value="personalInfo.city" :options="options" placeholder="请选择城市" />
      </a-form-item>
      <a-form-item
          label="手机号"
          name="phonenumber"
      >
        <a-input v-model:value="personalInfo.phonenumber" autocomplete="off" />
      </a-form-item>
      <a-form-item
          label="邮箱"
          name="email"
      >
        <a-input v-model:value="personalInfo.email" autocomplete="off" />
      </a-form-item>
      <a-form-item label="个性签名">
        <a-textarea v-model:value="personalInfo.personalSignature" placeholder="" :autoSize="{minRows:4}" show-count :maxlength="20" />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 3, span: 16 }">
        <a-button type="primary" html-type="submit" style="margin-bottom: 10px">保存</a-button>
      </a-form-item>
    </a-form>

 校验规则rules：

 const rules = {
      nickName: [
        {  required: true, validator:checkeNickName,trigger: ['change','blur']},
      ],
      email: [
        {
          required: true,
          // message: '请输入邮箱',
          // +表示多次出现  26个大小写英文字母表示为a-zA-Z 数字表示为0-9 下划线表示为_ 中划线表示为-
          //   [a-zA-Z0-9_-]+
          // ^开头 $结束
          //   邮箱正则
          // pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,

          validator:checkemail,
          trigger: ['change','blur'],
        },

      ],
      phonenumber: [
        {
          required: true,
          // message: '请输入手机号',
          trigger: ['change','blur'],
          validator:checkePhonenumber,
        },
      ]
    }

 validator方法：

    // 用户昵称校验
    const checkeNickName = function(rule, value,callback){
      if(value){
         if (value.length > 5) {
          return Promise.reject("用户昵称长度应小于5个字符")
        }
         else {
           return  Promise.resolve();
         }
      }
      else {
        return Promise.reject("请输入用户昵称")
      }
    }
    // 手机号校验
    const checkePhonenumber = function(rule, value,callback){
      if(value){
        const reg =/^1[345789]\d{9}$/
        if (!reg.test(value)) {
          return Promise.reject("请输入正确的手机号格式 ")
        }
        else {
          return  Promise.resolve();
        }
      }
      else {
        return Promise.reject("请输入手机号")
      }

    }
    // 邮箱校验
    const checkemail = function(rule, value,callback){
      // console.log(111)
      if(value){
        const reg =/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (!reg.test(value)) {
          return Promise.reject("请输入正确的的邮箱格式")
        }
        else {
          return  Promise.resolve();
        }
      }
      else {
        return Promise.reject("请输入邮箱")
      }
    }