naive happy ui 表单验证

声明表单对象

const formRef = ref()

声明表单键

const userForm = reactive({
  id             : '',
  tenantId       : '',
  username       : '',
  gender         : '1',
  password       : '',
  passwordConfirm: '',
  nickname       : '',
  phoneNumber    : '',
  avatarUrl      : [],
  des            : '',
  isEnable       : 1
})

验证规则

const rules = {
  username: [
    {
      required: true,
      validator (rule, value) {
        if (!value) {
          return new Error('账号不能为空！')
        } else if (!/^[a-zA-Z0-9]{3,10}$/.test(value)) {
          return new Error('应设置3至10位的账号(字母、数字)！')
        }
        return true
      },
      trigger: [ 'input', 'blur' ]
    }
  ],
  password: [
    {
      required: true,
      validator (rule, value) {
        if (!value) {
          return new Error('密码不能为空！')
        } else if (!/^[a-zA-Z0-9_-]{6,10}$/.test(value)) {
          return new Error('应设置6至10位的密码(字母、数字、下划线、减号)！')
        }
        return true
      },
      trigger: [ 'input', 'blur' ]
    }
  ],
  passwordConfirm: [
    {
      required: true,
      message : '请再次输入密码！',
      trigger : 'blur'
    },
    {
      validator (rule, value) {
        if (userForm.password !== value) {
          return new Error('两次密码输入不一致！')
        }
        return true
      },
      trigger: 'input'
    }
  ],
  nickname: {
    required: true,
    message : '昵称不能为空！',
    trigger : 'blur'
  },
  phoneNumber: [
    {
      required: true,
      validator (rule, value) {
        if (!value) {
          return new Error('手机号不能为空！')
        } else if (!/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(value)) {
          return new Error('手机号格式不正确！')
        }
        return true
      },
      trigger: [ 'input', 'blur' ]
    }
  ],
  avatarUrl: [
    {
      required: true,
      validator (rule, value) {
        if (value.length === 0) {
          return new Error('头像不能为空！')
        }
        return true
      },
      trigger: 'blur'
    }
  ]
}

html

<n-modal
    v-model:show="showModal"
    preset="card"
    style="width: 700px"
    title="用户新增"
    :bordered="false"
  >
    <n-form
      ref="formRef"
      :model="userForm"
      :rules="rules"
      label-placement="left"
      label-width="auto"
      require-mark-placement="right-hanging"
    >
      <n-form-item
        label="账号"
        path="username"
      >
        <n-input
          v-model:value="userForm.username"
          placeholder="请输入账号"
        />
      </n-form-item>
      <n-form-item
        label="密码"
        path="password"
      >
        <n-input
          v-model:value="userForm.password"
          type="password"
          placeholder="请输入密码"
        />
      </n-form-item>
      <n-form-item
        label="重复密码"
        path="passwordConfirm"
      >
        <n-input
          v-model:value="userForm.passwordConfirm"
          :disabled="!userForm.password"
          type="password"
          placeholder="请再输入一次密码"
        />
      </n-form-item>
      <n-form-item
        label="昵称"
        path="nickname"
      >
        <n-input
          v-model:value="userForm.nickname"
          placeholder="请输入昵称"
        />
      </n-form-item>
      <n-form-item
        label="手机号"
        path="phoneNumber"
      >
        <n-input
          v-model:value="userForm.phoneNumber"
          placeholder="请输入手机号"
        />
      </n-form-item>
      <n-form-item label="性别">
        <n-radio-group v-model:value="userForm.gender">
          <n-space>
            <n-radio value="1">
              男
            </n-radio>
            <n-radio value="2">
              女
            </n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item
        label="头像"
        path="avatarUrl"
      >
        <image-upload-box
          v-model:value="userForm.avatarUrl"
          :max="1"
        />
      </n-form-item>
      <n-form-item label="简介备注">
        <n-input
          v-model:value="userForm.des"
          type="textarea"
          placeholder="请输入简介备注"
          :autosize="{
            minRows: 3,
            maxRows: 5
          }"
        />
      </n-form-item>
      <n-form-item label="状态">
        <n-switch
          v-model:value="userForm.isEnable"
          :checked-value="1"
          :unchecked-value="0"
        >
          <template #checked>
            启用
          </template>
          <template #unchecked>
            禁用
          </template>
        </n-switch>
      </n-form-item>
    </n-form>
    <template #footer>
      <div style="display: flex; justify-content: flex-end">
        <n-button
          type="primary"
          :disabled="subLoading"
          @click="handleSubmit"
        >
          保存
        </n-button>
      </div>
    </template>
  </n-modal>