Form 表单校验

管理表单数据及校验规则，可配合 fui-form-item 显示字段错误。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

vue

<template>
  <!-- 表单 -->
  <fui-form ref="formRef" :model="formData">
    <!-- 姓名输入框 -->
    <fui-input v-model="formData.name" label="姓名" />
    <button @click="handleSubmit">提交</button>
  </fui-form>
</template>

<script>
// 姓名必填规则
const NAME_RULES = [{ name: 'name', rule: ['required'], msg: ['请输入姓名'] }];

export default {
  data() {
    return {
      // 表单数据
      formData: { name: '' }
    };
  },
  methods: {
    /** 校验表单后处理提交 */
    async handleSubmit() {
      try {
        const result = await this.$refs.formRef.validator(this.formData, NAME_RULES);
        if (result.isPassed) {
          uni.showToast({ title: '校验通过', icon: 'none' });
        }
      } catch (error) {
        uni.showToast({ title: '校验失败，请检查表单配置', icon: 'none' });
      }
    }
  }
};
</script>

规则数组中的 name 对应数据字段，rule 为内置规则名数组，msg 为对应的错误消息；validator 可配置自定义校验方法。常用规则包括 required、isMobile、isEmail、minLength:数字 和 maxLength:数字。

属性

属性	类型	说明	官网默认值
model	Object	表单数据，结合表单项校验时必传	{}
padding	Array	表单外层内边距	[]
show	Boolean	是否显示表单级错误提示	true
disabled	Boolean	是否通过遮罩禁用表单	false
top	Number / String	错误提示顶部偏移，单位 px	0
left	Number / String	错误提示左侧偏移，单位 rpx	24
right	Number / String	错误提示右侧偏移，单位 rpx	24
background	String	错误提示背景色	#FF2B2B
size	Number / String	错误提示字号，单位 rpx	28
color	String	错误提示颜色	#fff
radius	Number / String	提示框圆角，单位 rpx	16
duration	Number	提示显示时长，单位毫秒	2000
labelSize	Number / String	表单项标题字号，0 使用全局值	0
labelColor	String	表单项标题颜色	#333
labelWidth	Number / String	表单项标题宽度，0 使用全局值	0
labelAlign	String	标题对齐：left、right	left
labelWeight	Number / String	标题字重，0 使用全局值	0
asteriskColor	String	必填星号颜色	#FF2B2B
asteriskPosition	String	必填星号位置：left、right	left
errorPosition	Number / String	字段错误定位：1 absolute、2 relative	1
errorAlign	String	字段错误对齐：left、center、right	center

方法

方法	说明
validator(model, rules, checkAll)	返回 Promise，结果包含 `isPassed` 和 `errorMsg`；字段级错误展示需将 checkAll 设为 true
validateField(props, model, rules)	校验指定字段，props 为字段名或数组
clearValidate(props)	清除字段错误提示
resetFormItemParam()	通知表单项重置相关参数
switchRealTimeValidator(isOpen, rules)	开启或关闭表单项实时校验

插槽和平台说明

默认插槽放置表单内容。H5 使用默认导航栏时提示框顶部默认为 44px；非 nvue 默认错误背景色可通过 --fui-color-danger 调整。

事件

事件	说明	回调参数
—	无自定义事件	—

插槽

插槽	说明
default	表单中的控件和表单项

Form 表单校验 ​

支持平台 ​

基础用法 ​

属性 ​

方法 ​

插槽和平台说明 ​

事件 ​

插槽 ​

Form 表单校验

支持平台

基础用法

属性

方法

插槽和平台说明

事件

插槽