uni-forms的使用-1.4.10版本

【注意版本】

uni-forms 1.4.0 版本以后，很多用法和原来不一样。我使用的版本是 1.4.10 。

导入组件后：

• 使用<uni-forms>包裹<uni-forms-item>，<uni-forms-item>包裹其她组件，如 uni-easyinput、uni-data-select 和 uni-app 内置的表单组件；
• 每个要校验的表单项，不管input还是checkbox，都必须放在<uni-forms-item>组件中，且一个<uni-forms-item>组件只能放置一个表单项。
• required 只负责显示 * ，不负责校验。必填项需要在校验rules中写   { required: true, errorMessage: '请输入title', } 
• uni-forms 用 model属性绑定对象，rules 属性绑定校验规则，如  <uni-forms ref="form" :model="formData" :rules="rules"></uni-forms>   
• uni-forms-item 需要设置 name 属性为当前字段名，name的值需要和内部组件绑定的属性值相同，如  <uni-forms-item label="学校" name="school" :label-width="100" required> <uni-easyinput v-model="formData.school" /> </uni-forms-item>  
• rules 是对象，用 uni-form-item上绑定的name值（如school）定义一个新对象，属性为 {rules:[ {检验规则} ] } ，如 formRules: { school: { rules: [ { format: "string", errorMessage: '类型必须是 string', }, ] } } 
• 表单校验时机：uni-forms 1.4.0 后，只有 uni-forms上可以配置 validateTrigger，不再支持单独控制每个子表单的校验时机  <uni-forms ref="form" :model="formData" :rules="formRules" validate-trigger="bind"></uni-forms> 

一个简单的使用例子如下：

<template>
    <view>
        <view class="info-container" v-for="item in formData">{{ item }}</view>
        <!-- ----------------------------------------------------------------------- -->
        <view class="form-container">
            <uni-forms ref="form" :model="formData" :rules="formRules" validate-trigger="bind">
                <uni-forms-item label="姓名" name="name" label-width="100px" required>
                    <uni-easyinput v-model="formData.name" />
                </uni-forms-item>
                <uni-forms-item label="年龄" name="age" :label-width="100" required>
                    <uni-easyinput v-model="formData.age" />
                </uni-forms-item>
                <uni-forms-item label="学校" name="school" :label-width="100" required>
                    <uni-easyinput v-model="formData.school" />
                </uni-forms-item>
            </uni-forms>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                name: "姜南",
                age: 28,
                school: "清华大学"
            },
            formRules: {
                name: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '请输入title',
                        },
                        {
                            minLength: 1,
                            maxLength: 5,
                            errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
                        },
                    ],
                },
                age: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '请输入age',
                        },
                        {
                            format: "number",
                            errorMessage: '类型必须是 number',
                        },
                        {
                            minimum: 1,
                            maximum: 100,
                            errorMessage: '年龄必须在 {minimum} 到 {maximum} 之间',
                        },
                    ]
                },
                school: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '请输入school',
                        },
                    ]
                }
            },
        }
    },
    methods: {

    }
}
</script>

<style >
.info-container {
    display: inline-block;
    width: 30%;
    text-align: center;
    background-color: antiquewhite;
}

.form-container {
    padding: 10rpx;
    margin: 10rpx;
    border: 1rpx solid green;
}
/* 有scoped这里不生效 */
.uni-forms-item {
    background-color: yellow;
}
</style>

 运行结果：