引入组件

局部引入

// parent.vue
const FForm = defineAsyncComponent(() => import('@/components/formaui/f-form/f-form.vue'))
const FFormItem = defineAsyncComponent(() => import('@/components/formaui/f-form-item/f-form-item.vue'))

基础用法

通过 ref 调用 validate 进行校验；isShowMessage 为 false 时由 f-form-item 展示错误信息

<f-form ref="formRef" :model="formData" :is-show-message="false">
  <f-form-item label="姓名" is-asterisk prop="name">
    <f-input
      v-model="formData.name"
      padding="0"
      bg-color="transparent"
      :show-border-bottom="false"
      placeholder="请输入姓名" />
  </f-form-item>
  <f-button width="400rpx" height="84rpx" @click="submit">提交</f-button>
</f-form>

import { reactive, ref } from 'vue'
import type { FFormRule } from '@/components/formaui/f-form/types'

const formRef = ref()
const formData = reactive({ name: '' })
const rules: FFormRule[] = [
  {
    name: 'name',
    rule: ['required', 'isChinese', 'minLength:2', 'maxLength:6'],
    msg: ['请输入姓名', '姓名必须全部为中文', '姓名必须2个或以上字符', '姓名不能超过6个字符']
  }
]

const submit = () => {
  // 结合 form-item 展示错误时，第三个参数 checkAll 需为 true
  formRef.value?.validate(formData, rules, true).then((res) => {
    if (res.isPass) {
      uni.showToast({ title: '校验通过！', icon: 'none' })
    }
  })
}

顶部 Tip 提示

isShowMessage 默认 true，messageType 为 tip 时从顶部弹出错误；设为 toast 则使用 uni.showToast

<f-form ref="formRef" :model="formData" message-type="tip">
  <!-- form-item ... -->
</f-form>

即时校验

调用 immediateValidate(true, rules) 后，字段值变化时自动校验

formRef.value?.immediateValidate(true, rules)

插槽

名称	说明
default	表单内容

属性

名称	类型	说明	默认值
model	object	表单数据对象	{}
rules	FFormRule[]	表单验证规则（优先使用 form-item 的 rules）	[]
bgColor	string	背景颜色	transparent
padding	string	内边距	0
isShowMessage	boolean	是否弹出错误；为 false 时由 form-item 展示错误	true
messageType	`tip` | `toast`	错误弹出方式	tip
borderRadius	string	圆角	0
disabled	boolean	是否禁用表单内交互	false
tipTop	number / string	顶部错误提示 top（px）	H5:44 / 其它:0
tipPadding	string	错误提示内边距	20rpx
tipBgColor	string	错误提示背景色	#f74d54
tipFontSize	string	错误提示字号	28rpx
tipColor	string	错误提示文字色	#fff
tipBorderRadius	string	错误提示圆角	12rpx
duration	number / string	错误消息显示时长（ms）	2000

事件

事件名	说明	回调参数
-	-	-

方法

方法名	说明	传入参数
validate	校验整个表单	model、rules、checkAll（结合 item 展示错误时传 true）
validateField	校验指定字段	props、rules、model
immediateValidate	开启/关闭即时校验	isOpen、rules
clearValidate	清除校验信息；不传则清除全部	props（string 或 string[]）

内置规则（rule）

可传入：required、isMobile、isEmail、isCarNo、isIdCard、isAmount、isNum、isChinese、isNotChinese、isEnglish、isEnAndNo、isEnOrNo、isSpecial、isEmoji、isDate、isUrl、isSame:key、range:[min,max]、minLength:n、maxLength:n、isKeyword:a,b