更新记录

1.0.3（2023-09-06）

1.0.3:fix

1.0.2（2023-09-01）

1.0.2

1.0.1（2023-09-01）

1.0.1

平台兼容性

my-ValidatorVariable 验证器组件（支持异步）

依赖 npm install aiy-utils

代码演示

完整代码，props说明。见最下方

<template>
            <my-ValidatorVariable ref="vv" v-model="formObj" :rules="rules" :isAsync="true" :isSin="true"
                    :immediateV="false" :errorStyle="{color:'blue'}">
                    <view v-if="loginType">
                        <my-vItem keyName="itemRules" :showRe="false" :rules="itemRules">
                            <view class="list">
                                <view class="icon">
                                    <my-img src="http://xlcp-student.f-book.cn/images/userlogin.png"></my-img>
                                </view>
                                <input class="phone" :value="formObj.itemRules.join(',')" placeholder-class="placeholderClass"
                                    @input="itemRulesChange" placeholder="输入itemRules" />
                            </view>
                        </my-vItem>
                        <my-vItem :keyName="'obj.'+cskey" :showRe="false">
                            <view class="list">
                                <view class="icon">
                                    <my-img src="http://xlcp-student.f-book.cn/images/userlogin.png"></my-img>
                                </view>
                                <input class="phone" v-model.trim="formObj.obj.a" placeholder-class="placeholderClass"
                                    placeholder="输入obj.a" />
                            </view>
                        </my-vItem>
                    </view>
                    <my-vItem keyName="user_no" :showRe="false" :errorDiys="{color:'red'}">
                        <view class="list">
                            <view class="icon">
                                <my-img src="http://xlcp-student.f-book.cn/images/userlogin.png"></my-img>
                            </view>
                            <input class="phone" v-model.trim="formObj.user_no" placeholder-class="placeholderClass"
                                placeholder="输入学号" />
                        </view>
                    </my-vItem>
                    <my-vItem keyName="user_password" :showRe="false">
                        <view class="list">
                            <view class="icon">
                                <my-img src="http://xlcp-student.f-book.cn/images/password.png"></my-img>
                            </view>
                            <input class="password" v-model.trim="formObj.user_password" placeholder-class="placeholderClass"
                                placeholder="输入密码" />
                        </view>
                    </my-vItem>
                </my-ValidatorVariable>
                <view style="margin-left: auto;font-size: 12px;color: rgba(0, 0, 0, 0.5)" @click="changeLogin">切换登录方式</view>
                <view style="width: 100%;" class="login_btn">
                    <tag @click="submit" :disabled="loading" :diyStyle="btnSty">
                        登录
                    </tag>
                </view>
<template>
<script setup>
                    const vv = ref()
                    const checked = ref(true)
                    const formObj = reactive({
                        user_no: "",
                        user_password: "",
                        obj: {
                            a: ""
                        },
                        itemRules: []
                    })
                    const btnSty = {
                        width: '100%',
                        flex: '1',
                        height: '96rpx',
                        textAlign: 'center',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        boxSizing: 'border-box',
                        backgroundColor: 'var(--shop-mainly-color)',
                        borderRadius: '24rpx',
                        color: '#FFFFFF',
                        margin: '86rpx auto 32rpx auto',
                        fontSize: '32rpx',
                    }
                    const loginType = ref(true)
                    let itemRules = {
                        key: "itemRules",
                        rules: [{
                            validator: function(value, callback) {
                                // 同步方式
                                if (value.value.length < 10) {
                                    callback("itemRules数组长度<10")
                                } else {
                                    callback()
                                }
                            }
                        }]
                    }
                    const itemRulesChange = (e) => {
                        formObj.itemRules.push('a')
                    }
                    const changeLogin = () => {
                        loginType.value = !loginType.value
                    }
                    const cskey = "a"
                    const rules = {
                        "obj.a": {
                            key: "obj.a",
                            rules: [{
                                    strategy: {
                                        isNonEmpty: true,
                                    },
                                    errorMsg: '不能为空'
                                },
                                {
                                    strategy: {
                                        minLength: 6,
                                        maxLength: 20
                                    },
                                    errorMsg: '长度在 6-100'
                                },
                                {
                                    validator: function(value, callback) {
                                        // // 同步方式
                                        // if (!value.value.includes("0")) {
                                        //  callback("cc没有0")
                                        // } else {
                                        //  callback()
                                        // }
                                        // 也可以使用异步
                                        setTimeout(() => {
                                            console.log(value)
                                            if (!value.value.includes("0")) {
                                                callback("obj.a没有0")
                                            } else {
                                                callback()
                                            }
                                        }, 2000);
                                    }
                                }
                            ]
                        },
                        user_no: {
                            key: "学号",
                            rules: [{
                                    strategy: {
                                        isNonEmpty: true,
                                    },
                                    errorMsg: '不能为空'
                                },
                                {
                                    strategy: {
                                        minLength: 1,
                                        maxLength: 20
                                    },
                                    errorMsg: '长度在 1-20'
                                }
                            ]
                        },
                        user_password: {
                            key: "密码",
                            rules: [{
                                    strategy: {
                                        isNonEmpty: true,
                                    },
                                    errorMsg: '不能为空'
                                },
                                {
                                    strategy: {
                                        minLength: 6,
                                        maxLength: 18
                                    },
                                    errorMsg: '长度在 6-18'
                                },
                                // {
                                //  validator: function(value, callback) {
                                //      // // 同步方式
                                //      // if (!value.value.includes("0")) {
                                //      //  callback("cc没有0")
                                //      // } else {
                                //      //  callback()
                                //      // }
                                //      // 也可以使用异步
                                //      setTimeout(() => {
                                //          console.log(value)
                                //          if (!value.value.includes("0")) {
                                //              callback("密码没有0")
                                //          } else {
                                //              callback()
                                //          }
                                //      }, 2000);
                                //  }
                                // }
                            ]
                        },
                    }
                    const submit = debounce(() => {
                        vv.value.submit().then(res => {
                            console.log("验证成功")
                            goLogin()

                        }).catch(err => {
                            console.log("验证失败")
                        })
                    }, 500, true)
</script>

my-ValidatorVariable (props)

my-vItem (props)