Form 表单

此组件集成了表单校验功能，需配合c-form-item表单项组件使用，验证规则请参考async-validator。

表单验证时，请调用表单组件的validate()方法，返回Promise对象：

import { ref } from 'vue';
const form = ref(null);
form.value.validate().then(postData=>{
    console.log(postData)
})

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
model	Object	{}	表单数据	All
rules	Object	{}	表单校验规则 注意：带有function自定义校验的规则，需要使用this.$refs.myForm.setRules();	All
disabled	Boolean	null	是否禁用	All
readonly	Boolean	null	是否只读	All
itemMargin	String,Number,Array	null	c-form-item组件的margin设置	All
itemPadding	String,Number,Array	null	c-form-item组件的padding设置	All
errorType	String	text	表单错误信息提示方式，none/text/toast	All
errorStyle	Object	{}	错误样式	All
hideLabel	Boolean	false	隐藏label	All
labelPros	Object	{}	label样式 参考c-text的props	All
labelPosition	String	left	label位置，left，top	All
labelWidth	Number,String	null	label宽度	All
labelAlign	String	left	label居中方式，left/center/right	All
labelGutter	String,Number	null	label和内容之间的间距	All
border	String	bottom	是否显示表单域的边框 none,top,bottom	All
borderStyle	Object	{}	边框样式 参考c-divider组件的props	All
itemCntStyle	Object	{}	内容样式	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

插槽

插槽名	说明
default	默认插槽

方法

名称	说明
setRules({})	设置校验规则
validate()	表单校验，返回一个promise对象，参数formData

示例

以下示例展示了对象校验，动态表单校验，验证规则请参考async-validator。

<template>
    <c-form ref="myForm" :model="formData">
        <c-form-item label="姓名" prop="name" required>
            <c-input v-model="formData.name" placeholder="请输入姓名" />
        </c-form-item>

        <c-form-item label="年龄" prop="profile.age" required>
            <c-input v-model="formData.profile.age" type="digit" toNumber placeholder="请输入年龄" />
        </c-form-item>
    
        <c-form-item label="性别" prop="profile.sex" required>
            <c-checkbox-group v-model="formData.profile.sex" shape="circle" radio layoutRow>
                <c-checkbox value="男">男</c-checkbox>
                <c-checkbox value="女">女</c-checkbox>
            </c-checkbox-group>
        </c-form-item>

        <!-- 动态表单 -->
        <c-form-item label="联系人" prop="contactList" labelPosition="top" required>
            <view v-for="(item,index) in formData.contactList" :key="index" class="c-bg-base c-p-10 c-mb-10">
                <c-text :text="`联系人${index+1}`" bold c-class="c-mb-8" />
                <c-form-item :label="`联系人${index+1}姓名`" :prop="`contactList.${index}.name`">
                    <c-input v-model="formData.contactList[index].name" placeholder="请输入姓名" />
                </c-form-item>
                <c-form-item :label="`联系人${index+1}电话`" :prop="`contactList.${index}.phone`">
                    <c-input v-model="formData.contactList[index].phone" type="tel" placeholder="请输入电话" />
                </c-form-item>
            </view>

            <c-btn size="sm" text="添加" @click="formData.contactList.push({name:'',phone:''})" />
        </c-form-item>

        <c-btn type="primary" @click="formSubmitHandle" text="提交"></c-btn>
    </c-form>
</template>
<script setup>
import { ref } from 'vue';
import { onReady } from '@dcloudio/uni-app'

const myForm = ref(null);

// 表单数据
const formData = reactive({
    name:'',
    contactList:[
        // 格式：{name:'',phone:''}
    ],
    profile:{
        age:'',
        sex:'',
    }
})

// 表单校验规则
onReady(()=>{
    myForm.value.setRules({
        name:[
            {required:true}
        ],

        // 对象校验
        profile:[
            {
                required:true,
                type:'object',
                fields:{
                    age:{ type: 'number', required: true ,message: '年龄不能为空' },
                    sex:{ type: 'string', required: true },
                }
            }
        ],

        // 动态表单校验
        contactList:{
            required:true,
            type:'array',

            defaultField:{
            type:'object',
            fields:{
                name:[
                    {required:true}
                ],
                phone:[
                    {required:true,}
                ]
            }
            }
        },
    })
})

// 提交表单
function formSubmitHandle() {
    myForm.value.validate().then(postData=>{
        console.log(postData)
    })
}
</script>