uniapp使用uview弹框页面 +通用表单+校验

<template>
  <up-modal
    :show="modelValue"
    title="信息"
    confirmText="提交"
    showCancelButton
    @confirm="confirm"
    @cancel="commonClick"
  >
    <up-form labelPosition="left" :model="form" :rules="rules" labelWidth="60" ref="formRef">
      <up-form-item label="姓名" prop="username">
        <up-input v-model="form.username"></up-input>
      </up-form-item>
      <up-form-item label="手机号" prop="mobile">
        <up-input v-model="form.mobile" type="number"></up-input>
      </up-form-item>
    </up-form>
  </up-modal>
</template>

<script setup lang="ts">
import { editUserInfo } from '@/services/project'
import { useUserInfo } from '@/stores'

const props = defineProps<{
  modelValue?: Boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: Boolean): void
}>()

const form = ref({
  username: '',
  mobile: '',
})

const rules = ref({
  username: [
    {
      required: true,
      message: '请输入姓名',
      trigger: ['blur', 'change'],
    },
  ],
  mobile: [
    {
      required: true,
      message: '请输入手机号',
      trigger: ['change', 'blur'],
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule: any, value: any, callback: any) => {
        // 上面有说，返回true表示校验通过，返回false表示不通过
        // uni.$u.test.mobile()就是返回true或者false的
        return uni.$u.test.mobile(value)
      },
      message: '手机号码不正确',
      // 触发器可以同时用blur和change
      trigger: ['change', 'blur'],
    },
  ],
})

const formRef = ref<any>(null)

const useInfo = useUserInfo()

const commonClick = () => {
  emit('update:modelValue', false)
  formRef.value.resetFields()
}

const confirm = () => {
  formRef.value
    .validate()
    .then(async (valid: any) => {
      if (valid) {
        const res = await editUserInfo({ ...form.value, id: useInfo.userInfo.id })
        commonClick()
        useToast('提交成功')
      }
    })
    .catch(() => {
      // 处理验证错误
      console.log('验证错误')
    })
}
</script>