更新记录

1.0.0（2025-03-02） 下载此版本

1.0.0

平台兼容性

xiaoming-form

例子

<template>
    <view>
        <XiaomingForm :model="model" :rules="rules" ref="formRef">
            <XiaomingFormItem label="Email*" prop="account" ref="account">
                <input class='inputTEST' placeholder="you@email.com" v-model="model.account" clearable></input>
            </XiaomingFormItem>
            <XiaomingFormItem label="Password *" prop="password" ref="password">
                <input class='inputTEST' v-model="model.password" placeholder="Password(min of 8 characters)"
                    clearable></input>
            </XiaomingFormItem>
            <XiaomingFormItem label="code *" prop="code" ref="code">
                <input class='inputTEST' v-model="model.code" placeholder="code" clearable></input>
                <view>model.code:{{model.code}}</view>
            </XiaomingFormItem>
        </XiaomingForm>
        <button @click="onSubmit">校验</button>
        <!-- <button @click="onSetCode">给code赋值</button> -->
    </view>
</template>

<script setup>
    import { ValidatorValue, ValidatorRule, ValidatorCb, ValidatorReturn, Validator } from "@/uni_modules/xiaoming-form/types/index.uts"
    import XiaomingForm from '@/uni_modules/xiaoming-form/components/xiaoming-form.uvue'
    import XiaomingFormItem from '@/uni_modules/xiaoming-form/components/xiaoming-form-item.uvue'
    // import { ValidatorValue, ValidatorRule, ValidatorCb, ValidatorReturn, Validator } from "./types/index.uts"
    // import XiaomingForm from './xiaoming-form.uvue'
    // import XiaomingFormItem from './xiaoming-form-item.uvue'
    console.log("XiaomingForm", XiaomingForm)
    console.log("XiaomingFormItem", XiaomingFormItem)
    // type InfoBase = {
    //  account : string;
    //  password : string;
    //  code:string;
    // }
    //重点！必须是UTSJSONObject类型
    const model = ref<UTSJSONObject>({
        account: "", //123@qq.com
        password: "",
        code: ''//12345678
    });

    const rules = ref<UTSJSONObject>({
        account: [
            {
            require: true,
            message: "账号必填"
        }, {
            email: true,
            message: "账号需是有效邮箱"
        }],
        password: [{
            require: true,
            message: "密码必填"
        }],
        code: [
            {
                require: true,
                message: "code必填"
            },
            {
                min: 2,
                message: "code长度最少为2"
            },
            {
                max: 3,
                message: "code长度最大为3"
            },
            // {
            //  validator: (value : ValidatorValue, rule : ValidatorRule, cb : ValidatorCb) => {
            //      if (value != '11') {
            //          return cb('code不对')
            //      }
            //      return cb(null)
            //  }
            // },
        ]
    });

    //获取表单实例
    const formRef = ref<ComponentPublicInstance | null>(null)
    const instance = getCurrentInstance()!.proxy!
    let asyFn = async function () : Promise<boolean> {
        return true;
    }
    const onSubmit = async () => {
        const childComponent = instance.$refs['formRef'] as ComponentPublicInstance;
        const valid = childComponent.$callMethod('validate', null, (valid : boolean, err : string | null) => {
            if (valid) {
                uni.showToast({
                    title: "校验通过"
                })
            }
            else {
                uni.showToast({
                    title: err != null ? err : "校验失败",
                    icon: 'error'

                })
            }
        })
        console.log("valid", valid)
    }
</script>

<style>
    .inputTEST {
        margin: 10 10;
        border-radius: 20;
        border: 2px solid gainsboro;
        height: 45;
    }
</style>