更新记录

1.1.4（2024-03-18）

• form 新增属性classes [方便结合tailwindcss]

1.1.3（2024-03-15）

• 新增form-item的labelStyle属性，可以定义lable样式

1.1.2（2023-05-12）

• 修复min或者max填写0不检测的Bug

平台兼容性

jc-form 表单验证

内置 required, max, min, validator, pattern规则

required 支持空字符串，空数组，空对象的检查

max和min成对出现即检测区间，只有min时候为最小值，max时为最大值

包含 jc-form, jc-form-item, jc-form-rule 组件

支持toast提示

支持逐个验证和全部验证

已支持rules用在 jc-form组件上

使用

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

    const formRules = {
        title: [{ required: true, message: '请输入姓名'}]
    }

    const testForm = reactive({
        title: '',
        name: '',
        age: '',
        tel: '',
        email: '',
        colors: [],
        cont: ''
    })

    const formRef = ref()

    function validTel(val) { // 自定义验证
        return /^1\d{10}$/.test(val)
    }

    function addColor() {
        Math.random() > .5 ? testForm.colors.push(`#${Number(Math.random()).toString(16).substr(2,6)}`) : (testForm.colors = [])
    }

    async function submit() {
        try {
            await formRef.value.validate()
            console.log('验证通过');
        } catch (e) {
            console.log('验证失败', e)
        }
    }

    function reset() {
        formRef.value.reset()
    }
</script>

        <view class="bg-white p-2 mb-4">
            <jc-form :model="testForm" :rules="formRules" ref="formRef" :toastError="true" :checkAll="true">
                <jc-form-item label="标题" prop="title">
                    <input type="text" v-model="testForm.title" placeholder="请输入标题" />
                </jc-form-item>
                <jc-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名'}]">
                    <input type="text" v-model="testForm.name" placeholder="请输入姓名" />
                </jc-form-item>
                <jc-form-item label="年龄" prop="age" :rules="[{ min:10, max: 18, message: '年龄10-18岁'}]">
                    <input type="text" v-model="testForm.age" placeholder="年龄10-18岁" />
                </jc-form-item>
                <jc-form-item label="电话" prop="tel" :rules="[{ validator: validTel, message: '电话号码不规范'}]">
                    <input type="text" v-model="testForm.tel" placeholder="请输入电话号码" />
                </jc-form-item>
                <jc-form-item label="邮箱" prop="email" :rules="[{ pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ }]">
                    <input type="text" v-model="testForm.email" placeholder="请输入邮箱地址" />
                </jc-form-item>
                <jc-form-item label="颜色" prop="colors"  :rules="[{ required: true, message: '请输入颜色'}]">
                    <view class="flex">
                        <input type="text" v-model="testForm.colors" placeholder="请输入颜色" class="flex-1" />
                        <button @tap="addColor">加颜色</button>
                    </view>
                </jc-form-item>
                <jc-form-item label="内容" prop="cont" :border="false" direction="col" :rules="[{ required: true, message: '请输入内容'}]">
                    <textarea v-model="testForm.cont" style="height: 160rpx;" placeholder="请输入内容"></textarea>
                </jc-form-item>

                <jc-form-item :border="false">
                    <view class="flex">
                        <button @tap="submit">验证</button>
                        <button @tap="reset">重置</button>
                    </view>
                </jc-form-item>
            </jc-form>
        </view>

jc-form

props

slot

emit

expose

jc-form-item

props

slot

emit

无

jc-form-rule

props

slot

emit

expose