pure-v

English | 更新日志 | 反馈错误/缺漏 | Gitee

1. 特性

1. typescript 编写
2. 多端支持
3. 自定义验证规则、错误提示
4. 支持dom元素绑定
5. 体积小巧，简单易用

2. 快速使用

2.1 npm 安装

npm i pure-v

import purev from 'pure-v';

purev('2020-01-01', 'date');

2.2 cdn

<script src="https://cdn.jsdelivr.net/npm/pure-v/purev.min.js"></script>
<script>
    purev('2020-01-01', 'date');
</script>

3 api

interface IPureV {
    (text: TValidText, rule: TRule): ITextValidResult;
    (json: Json<TValidText>, rules: Json<TRule>): IJsonValidResult;
    (formName: string | HTMLElement): IFormValidResult;
    useToast: boolean;
    toast(text: string): void;
    tip(rule: string | Json<string>, text: string): void;
    reg(rule: string | Json<IReg>, reg?: IReg): void;
    lang(lang: TLang): void | never;
    onOnePass(option: IBaseValidResult, dom?: HTMLElement): void;
    onOneFail(option: IBaseValidResult, dom?: HTMLElement): void;
}

3.1 验证文本

purev('2020-01-02', 'date')

3.2 验证json

purev({
    name: 'theajack',
    birthday: '1994-01-01',
    email: '[email protected]',
    intro: ''
}, {
    name: 'notnull',
    birthday: 'date',
    email: 'email',
    intro: 'notnull'
});

3.3 绑定DOM

<div pv-form='form'>
    name:<input type="text" pv-rule='notnull'><br><br>
    birthday:<input type="text" pv-rule='date'><br><br>
    <button onclick='valid()'>validate</button>
</div>
<script>
    function valid (){
        purev('form');
    }
</script>

支持使用 pv-form 属性，css选择器，或dom元素

当元素有 pv-rule 属性时，则只验证当前元素，否则验证该元素所有含有 pv-rule 属性的子元素

有以下属性

1. pv-form 待验证的表单
2. pv-rule 验证规则
3. pv-name 给验证内容起一个名称
4. pv-attr 用于获取验证的文本，默认值为 value, 可选值有 value, text, html, src, href
5. pv-res 当验证失败时，验证dom元素 会带有 pv-res=fail

4. 自定义规则

purev.reg('custom', /^\d{3,4}$/);
purev.reg('customFn', (v) => {
    return v === 'purev' || v === 'PUREV';
});

purev('123', 'custom').pass,
purev('aaa', 'custom').pass,
purev('12345', 'custom').pass,
purev('purev', 'customFn').pass,
purev('PUREV', 'customFn').pass,
purev('xxxxx', 'custom').pass,

5. 自定义错误提示

purev.tip('date', '自定义日期提示');
purev('xxx', 'date').message;

6. 成功和失败监听

purev.onOnePass = (result) => {
    // ...
};
purev.onOneFail = (result) => {
    // ...
};

onOnePass 和 onOneFail 为单例模式，如需设置请直接覆盖这两个属性

7 使用实例

const result = {
    notnull: [
        purev('', 'notnull').pass,
        purev('xx', 'notnull').pass,
    ],
    date: [
        purev('xx', 'date').pass,
        purev('2020-01-02', 'date').pass,
        purev('2020-13-02', 'date').pass,
    ],
    email: [
        purev('[email protected]', 'email').pass,
        purev('xx', 'email').pass,
    ],
    number: [
        purev('1', 'number').pass,
        purev('12', 'number').pass,
        purev('12.3a', 'number').pass,
        purev('a12.3', 'number').pass,
        purev('123', 'number[3]').pass,
        purev('1234', 'number[3]').pass,
        purev('12345', 'number[3,6]').pass,
    ],
    idcard: [
        purev('340827111111111111', 'idcard').pass,
        purev('34082711111111111X', 'idcard').pass,
        purev('3408271111111111111', 'idcard').pass,
    ],
    length: [
        purev('123456', 'length[6]').pass,
        purev('1234你好', 'length[6]').pass,
        purev('1234567', 'length[6,9]').pass,
    ],
    url: [
        purev('https://www.baidu.com', 'url').pass,
        purev('http://www.baidu.com', 'url').pass,
        purev('xxxx', 'url').pass,
    ],
    decimal: [
        purev('1.1', 'decimal').pass,
        purev('0.1', 'decimal').pass,
        purev('0.1a', 'decimal').pass,
        purev('11', 'decimal').pass,
    ],
    lengthOfAny: [
        purev('123456', 'lengthOfAny[6]').pass,
        purev('1234你好', 'lengthOfAny[6]').pass,
        purev('12345你好', 'lengthOfAny[6]').pass,
    ],
    phone: [
        purev('11111111111', 'phone').pass,
        purev('1234', 'phone').pass,
        purev('22222222222', 'phone').pass,
    ],
    letterStart: [
        purev('a12', 'letterStart').pass,
        purev('a121', 'letterStart[4]').pass,
        purev('a121', 'letterStart[3, 5]').pass,
        purev('a1212a', 'letterStart[3, 5]').pass,
    ],
    range: [
        purev('99', 'range[100, 200]').pass,
        purev('123', 'range[100, 200]').pass,
        purev('200', 'range[100, 200]').pass,
        purev('201', 'range[100, 200]').pass,
    ],
    express: [
        purev('123', 'express[^\\d{3,4}$]').pass,
        purev('aaa', 'express[^\\d{3,4}$]').pass,
        purev('12345', 'express[^\\d{3,4}$]').pass,
    ],
    withNull: [
        purev('11111111111', 'phone').pass,
        purev('', 'phone').pass,
        purev('', 'phone null').pass,
    ]
};

purev({
    name: 'theajack',
    birthday: '1994-01-01',
    email: '[email protected]',
    intro: ''
}, {
    name: 'notnull',
    birthday: 'date',
    email: 'email',
    intro: 'notnull'
})

purev.reg('custom', /^\d{3,4}$/);
purev.reg('customFn', (v) => {
    return v === 'purev' || v === 'PUREV';
});

8 ts 接口

1. IPureV
2. ITextValidResult
3. IJsonValidResult
4. IFormValidResult

export interface IPureV {
    (text: TValidText, rule: TRule): ITextValidResult;
    (json: Json<TValidText>, rules: Json<TRule>): IJsonValidResult;
    (formName: string | HTMLElement): IFormValidResult;
    useToast: boolean;
    toast(text: string): void;
    tip(rule: string | Json<string>, text: string): void;
    reg(rule: string | Json<IReg>, reg?: IReg): void;
    lang(lang: TLang): void | never;
    onOnePass(option: IBaseValidResult, dom?: HTMLElement): void;
    onOneFail(option: IBaseValidResult, dom?: HTMLElement): void;
}
interface IBaseValidResult {
    pass: boolean;
    message: string;
    name?: string;
    reg?: RegExp;
    text: string;
}

export interface ITextValidResult extends IBaseValidResult {}

export interface IJsonValidResult {
    pass: boolean;
    message?: string;
    results: {
        [prop in string]: IBaseValidResult;
    }
}

interface IDomValidResult extends IBaseValidResult {
    dom: HTMLElement
}
export interface IFormValidResult {
    pass: boolean;
    message?: string;
    results: {
        [prop in string]: IDomValidResult;
    }
}