Form 表单

数据采集与统一表单校验容器，支持数据绑定 model、规则集 rules、手机号/邮箱/身份证内置正则表达式校验、validate() 异步校验与 resetFields() 字段重置。

---

代码示例

1. 基础用法与校验规则 (Basic Form & Rules)

通过 ref 绑定 <mu-form> 引用，使用 validate() 方法触发异步校验。

<template>
  <mu-form ref="formRef" :model="formData" :rules="formRules">
    <mu-input
      v-model="formData.username"
      label="用户名"
      required
      placeholder="请输入用户名"
    />
    <mu-input
      v-model="formData.phone"
      type="tel"
      label="手机号码"
      required
      phone-prefix
      placeholder="请输入手机号"
    />
    
    <mu-button type="primary" block @click="handleSubmit">提交表单</mu-button>
  </mu-form>
</template>

<script setup>
import { ref, reactive } from 'vue'

const formRef = ref(null)
const formData = reactive({
  username: '',
  phone: ''
})

const formRules = {
  username: [
    { required: true, message: '请输入用户名' },
    { min: 3, message: '用户名至少需要 3 位字符' }
  ],
  phone: [
    { required: true, message: '请输入手机号码' },
    { type: 'phone', message: '手机号码格式不正确' }
  ]
}

const handleSubmit = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    console.log('校验成功, 表单数据为:', formData)
  }
}
</script>

---

校验规则类型说明 (Rule Options)

每一个字段对应的规则数组包含以下属性配置：

属性	说明	类型
required	是否必填	Boolean
message	校验不通过时的提示文案	String
type	内置常见格式正则 (phone | email | idcard | url)	String
min	最小输入字符长度	Number
max	最大输入字符长度	Number
pattern	自定义正则表达式	RegExp
validator	自定义校验函数 (value, model) => Boolean | String	Function

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
model	表单数据绑定对象	Object	-	{}
rules	表单校验规则定义集合	Object	-	{}
labelWidth	全局统一 Label 标题宽度	String	-	'160rpx'
labelPosition	全局统一标题位置	String	left | top	'left'
disabled	是否全局禁用整个表单	Boolean	true | false	false
showMessage	校验失败时是否自动弹出错误提示 Toast	Boolean	true | false	true

---

组件方法说明 (Methods)

方法名	说明	参数	返回值
validate	校验整个表单所有字段	(callback?: Function)	Promise<Boolean>
validateField	校验某个具体字段名	(fieldName: String)	{ isValid, error }
resetFields	重置所有表单绑定的字段数据	-	-

---

插槽说明 (Slots)

插槽名	说明
default	表单项 (Input, Select 等) 容器插槽