更新记录

0.1.0（2024-06-24）下载此版本

fix:bug

1.1.2（2024-06-24）下载此版本

1:fix

1.1.1（2024-06-24）下载此版本

1: fix:v-if

平台兼容性

Vue2	Vue3
×	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.1.0	×	×	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	×	×	×	×	×

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

请使用最新版本，以前版本有很多bug

依赖 npm install aiy-utils

代码演示

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

<template>
    <view class="login" >
        <view class="mainBox">

            <view class="name">验证器</view>
            <view style="width: 100%;">
                <my-ValidatorVariable ref="vv" v-model="formObj" :rules="rules"  :isSin="true" :isChangeVv="true"
                    :immediateV="false" :errorStyle="{color:'blue'}" @vvError="vvError" @vvSucceed="vvSucceed" @vvIng="vvIng" @vvEnd="vvEnd">
                    <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="'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>
                    <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-vItem :keyName="'obj.b'" :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.b" placeholder-class="placeholderClass"
                                placeholder="输入obj.b" />
                        </view>
                    </my-vItem>
                    <my-vItem keyName="arr.1" :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.arr[1]" placeholder-class="placeholderClass"
                                placeholder="输入arr.1" />
                        </view>
                    </my-vItem>
                    <my-vItem keyName="arr.0.value" :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.arr[0].value" placeholder-class="placeholderClass"
                                placeholder="输入arr.0.value" />
                        </view>
                    </my-vItem>

                </my-ValidatorVariable>
            </view>

            <view style="width: 100%;" class="login_btn" @click="submit" >
                {{isVvErr?"登陆":"验证未通过"}}    
            </view>

        </view>

    </view>
</template>

<script setup>
    import {
        nextTick,
        reactive,
        ref
    } from "vue"
    import {
        debounce,
        awaitDOsomthing
    } from "aiy-utils"

    const vv = ref()
    const formObj = reactive({
        user_no: "456789",
        user_password: "",
        obj: {
            a: "",
            b:''
        },
        arr:[{value:"0"},100]

    })
    const isVvErr = ref(false)

    const vvIng = ()=>{
        console.log("验证中")
        uni.showLoading({
            title:"验证中"
        })
    }
    const vvEnd = ()=>{
        console.log("验证完成")
        uni.hideLoading()
    }
    const vvSucceed = ()=>{
        console.log("成功了")
        isVvErr.value = true
    }
    const vvError = (e)=>{
        console.log("验证失败", e)
        isVvErr.value = false
    }
    const cskey = "a"
    const rules = {
        "arr.0.value":{
            key:"arr.0.value",
            rules:[{
                    strategy: {
                        minLength: 6,
                        maxLength: 20
                    },
                    errorMsg: '长度在 6-100'
                }]
        },
        "arr.1":{
            key:"arr下标为1",
            rules:[         {
                    validator: function(value, callback) {
                        // 同步方式
                        if (value.value>10) {
                            callback("大于10了")
                        } else {
                            callback()
                        }

                    }
                }]
        },
        "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(() => {

                            if (!value.value.includes("0")) {
                                callback("obj.a没有0")
                            } else {
                                callback()
                            }
                        }, 2000);
                    }
                }
            ]
        },
        "obj.b": {
            key: "obj.b",
            rules: [{
                    strategy: {
                        isNonEmpty: true,
                    },
                    errorMsg: '不能为空'
                },
                {
                    validator: function(value, callback) {
                        // // 同步方式
                        // if (!value.value.includes("0")) {
                        //  callback("cc没有0")
                        // } else {
                        //  callback()
                        // }
                        // 也可以使用异步
                        setTimeout(() => {

                            if (!value.value.includes("0")) {
                                callback("obj.b没有0")
                            } else {
                                callback()
                            }
                        }, 5000);
                    }
                }
            ]
        },
        user_no: {
            key: "学号",
            rules: [{
                    strategy: {
                        isNonEmpty: true,
                    },
                    errorMsg: '不能为空'
                },
                {
                    strategy: {
                        minLength: 3,
                        maxLength: 20
                    },
                    errorMsg: '长度在 3-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("验证成功")
            if (!checked.value) {
                uni.showToast({
                    icon: "none",
                    duration: 3000,
                    title: "请阅读并勾选协议"
                })
                return false
            }

        }).catch(err => {
            console.log("验证失败",err)
        })
    }, 1000, true,false)
    //debounce(fun,time,是否立即执行，是否执行最后一次点击) 

</script>

<style lang="scss" scopd>
    .login {
        min-height: 100vh;
        min-width: 100vw;
        background: url("http://xlcp-student.f-book.cn/images/logoBg.png") no-repeat center center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 84rpx;
        box-sizing: border-box;
        background-size: cover;

        .placeholderClass {
            font-size: 28rpx;
            color: $app-CFCFCF;
        }

        .mainBox {
            position: relative;
            width: 100%;
            border-radius: 40rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .name {
                font-size: 40rpx;
                margin-top: 20rpx;
                margin-bottom: 88rpx;
            }

            .list {
                display: flex;
                align-items: center;
                height: 88rpx;
                background: #fff;
                border-radius: 16rpx;
                padding: 0 28rpx;
                box-sizing: border-box;
                margin-bottom: 36rpx;
                width: 100%;
                border: 1rpx solid rgba(0, 0, 0, 0.08);

                &:last-child {
                    margin-bottom: 100rpx;
                }

                input {
                    line-height: 96rpx;
                    flex: 1;
                    padding-left: 15rpx;
                    box-sizing: border-box;

                }

                .icon {
                    position: relative;
                    margin-right: 20rpx;
                    line-height: 32rpx;

                    :deep(image) {
                        width: 32rpx;
                        height: 32rpx;
                    }

                    &::after {
                        content: "";
                        position: absolute;
                        width: 2rpx;
                        height: 32rpx;
                        top: 50%;
                        right: -20rpx;
                        background: rgba(0, 0, 0, 0.1);
                        transform: translateY(-50%);
                    }
                }

                .getCode {
                    border-radius: 36rpx;
                    height: 64rpx;
                    padding: 0 16rpx;
                    line-height: 64rpx;
                    background: $app-mainly-color;
                    color: $app-FFFFFF;
                    font-size: 24rpx;
                }
            }

            .btn {
                width: 100%;
                height: 96rpx;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                background: var(--shop-mainly-color);
                // border: 1rpx solid rgb(255, 255, 255);
                box-shadow: 0rpx 8rpx 30px rgba(87, 214, 172, 0.5);
                border-radius: 24rpx;
                color: $app-FFFFFF;
                margin: 32rpx 0;
            }
        }

        .agree {
            display: flex;
            align-items: center;
            font-size: 24rpx;

            :deep(.uni-checkbox-input) {
                border-radius: 50%;
            }

            text {
                color: $app-mainly-color;
            }

            .ag {
                word-wrap: break-word;
            }
        }
    }

    .login_btn {
        width: 100%;
        height: 80rpx;
        background-color: gold;
        text-align: center;
        line-height: 80rpx;

    }
</style>

my-ValidatorVariable (props)

参数	说明	类型	默认值
modelValue	v-model	object	`-`
rules	验证规则	object	`-`
immediateV	是否立即验证（初始化只执行一次）	boolean	`-`
errorStyle	全局错误样式	object	`-`
isSin	单个表单项验证	boolean	`-`
isChangeVv	是否实时验证（依赖数据改变时,验证整表单,从表单第一项开始验证，单项验证失败，整个表单验证失败，跳出验证）	boolean	`-`
@vvSucceed	isChangeVv:true 或 isSingle:false或 immediateV:true 有效，代表整个表单验证成功	function	`-`
@vvError	isChangeVv:true或 isSingle:false或 immediateV:true 有效，代表整个表单验证失败返回验证失败结果	function	`-`
@vvIng	验证中	function	`-`
@vvEnd	验证结束	function	`-`

my-vItem (props)

参数	说明	类型	默认值
keyName	对应验证规则中的key	string	`-`
rules	验证规则	object	`-`
showRe	是否显示 *	boolean	`-`
errorDiys	错误样式	object	`-`

验证器组件（验证器，异步验证，表单验证，数据验证，自定义验证规则）异步验证 表单验证 自定义验证规则

更新记录

0.1.0（2024-06-24）下载此版本

1.1.2（2024-06-24）下载此版本

1.1.1（2024-06-24）下载此版本

平台兼容性

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

代码演示

my-ValidatorVariable (props)

my-vItem (props)

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

diy-canvas

验证器组件（验证器，异步验证，表单验证，数据验证，自定义验证规则）

验证器组件（验证器，异步验证，表单验证，数据验证，自定义验证规则） 异步验证 表单验证 自定义验证规则

更新记录

0.1.0（2024-06-24） 下载此版本

1.1.2（2024-06-24） 下载此版本

1.1.1（2024-06-24） 下载此版本

平台兼容性

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

代码演示

my-ValidatorVariable (props)

my-vItem (props)

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

diy-canvas

验证器组件（验证器，异步验证，表单验证，数据验证，自定义验证规则）

Modal title

验证器组件（验证器，异步验证，表单验证，数据验证，自定义验证规则）异步验证表单验证自定义验证规则

0.1.0（2024-06-24）下载此版本

1.1.2（2024-06-24）下载此版本

1.1.1（2024-06-24）下载此版本