更新记录

1.0.1(2025-01-05) 下载此版本

1.0.0(2025-01-05) 下载此版本

暂无


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.7 app-vue app-nvue × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × ×

自定义的验证器

user.js

复制代码/**
 * 自定义验证器
 */
import validate from '@/js_sdk/yoyo-validate/yoyo-validate.js';

class index extends validate {
    rule = {
        name: 'require|regular:^[\\w\\u4E00-\\u9FA5]{2,15}$',
        email: 'require|email|between:5,30',
        password: 'require|numberEn|min:5|max:16',
        code: 'require|int|between:1,10',
        authorization: 'require|isAuthorization',
        Bindtype: { require: true, regular: '^(qq|wx)$' }
    };

    message = {
        name: '尊称格式不对哦!',
        email: '邮箱地址格式不正确',
        code: '验证码格式不正确',
        password: '密码不符合规则',
        'password.min': '密码最小${1}个字符',
        'password.max': '密码最大${1}个字符',
        authorization: 'token格式不正确',
    };

    /**
     * 快捷场景(优先级低于方法的场景)
     * 数组选择的字段只能是rule已经配置好的(没有rule配置的将无效)
     */
    scene = {
        Login: ['email', 'password'],
        reg: ['name', 'email', 'password', 'code'],
    };

    /**
     * 登录的验证场景(必须scene开头的方法)(优先级高于scene属性)
     * @returns 
     */
    sceneTest(that) {
        return that.only(['account'])// 'password', 'age'
            // .append('account', 'max:15')//增加一个规则(字符串)
            // .append('age', 'require|between:1,3|int')//增加多个规则(字符串)
            // .remove('password', 'numberEn')//移除指定的
            // .remove('password', 'numberEn|min')//移除指定的多个(字符串)
            // .remove('password', ['numberEn','max'])//移除指定的多个(数组)
            // .remove('password')//移除该字段全部
            .append('password', { min: 1, max: 10, isYoyo: true });//增加一个规则(对象)
    }

    /**
     * 验证是否合格的token认证(后端|不支持异步|否则抛出会报错)
     * @param {Any} value 指定字段的值
     * @param {String} field 字段名
     * @param {Object} data 需要验证的所有数据
     */
    isAuthorization(value, field, data) {
        if (/^Bearer\s.+\..+\..+$/i.test(value)) {
            return true;
        }

        return 'token格式不正确';
    }

    /**
     * 自定义方法进行验证(后端|不支持异步|否则抛出会报错)
     * @param {Any} value 指定字段的值
     * @param {String} field 字段名
     * @param {Object} data 需要验证的所有数据
     */
    isYoyo(value, field, data) {
        // return '自定义拦截';
        return true;
    }
}

module.exports = (scene) => index.validate(scene);

然后你可以在vue里面调用它

复制代码<template>
    <view class="contents">
        <text>请随意输入测试即可</text>
        <input type="text" v-model="user.email" placeholder="请输入邮箱" />
        <input type="safe-password" v-model="user.password" password placeholder="请输入密码" />
        <button @click="validateTest">点击验证</button>
    </view>
</template>

<script>
    // 这里你可以分类写很多个验证器
    import uvalidate from '@/common/validate/user';
    export default {
        data() {
            return {
                user: {
                    email: '1294858802@qq.com',
                    password: ''
                }
            }
        },
        onLoad() {

        },
        methods: {
            validateTest() {
                try {
                    // 填验证场景即可
                    uvalidate('Login').check(this.user);
                    uni.showToast({
                        title: '验证通过',
                        icon: 'success'
                    });
                } catch (e) {
                    console.error(e.message);
                    uni.showToast({
                        title: e.message,
                        icon: 'none'
                    });
                }
            }
        }
    }
</script>

<style lang="scss">
    .contents {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        input {
            width: 200px;
            height: 30px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 5px;
            box-sizing: border-box;
            font-size: 14px;
            color: #333;
            outline: none;

        }
    }
</style>

隐私、权限声明

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

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

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

许可协议

MIT协议
Yoyo_123

2025-01-06

沙发

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问