pure-v

🚀 Lightweight and extensible pure js verification plugin

English | Online Use | Update Log | Feedback bug/missing | Gitee

---

1. Features

1. Typescript writing
2. Multi-terminal support
3. Customize validation rules and error prompts
4. Support dom element binding
5. Small size, easy to use

2. Quick use

2.1 npm installation

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 Verification text

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

3.2 Verify json

purev({
    name:'theajack',
    birthday: '1994-01-01',
    email:'me@theajack.com',
    intro:''
}, {
    name:'notnull',
    birthday:'date',
    email:'email',
    intro:'notnull'
});

3.3 Binding 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>

Support the use of pv-form attributes, css selectors, or dom elements

When the element has the pv-rule attribute, only the current element is verified, otherwise, all child elements that contain the pv-rule attribute are verified

Has the following properties

1. pv-form form to be validated
2. pv-rule validation rules
3. pv-name gives the verification content a name
4. pv-attr is used to obtain the verified text, the default value is value, and the optional values ​​are value, text, html, src, href
5. pv-res When the verification fails, the verification dom element will have pv-res=fail

4. Custom rules

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. Custom error prompt

purev.tip('date','Custom Date Tip');
purev('xxx','date').message;

6. Success and failure monitoring

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

onOnePass and onOneFail are singleton mode, if you need to set, please directly override these two attributes

7 Usage examples

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('theajack@qq.com','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:'me@theajack.com',
    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 interface

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;
    }
}