English | Online Use | Update Log | Feedback bug/missing | Gitee
- Typescript writing
- Multi-terminal support
- Customize validation rules and error prompts
- Support dom element binding
- Small size, easy to use
npm i pure-v
import purev from'pure-v';
purev('2020-01-01','date');
<script src="https://cdn.jsdelivr.net/npm/pure-v/purev.min.js"></script>
<script>
purev('2020-01-01','date');
</script>
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;
}
purev('2020-01-02','date')
purev({
name:'theajack',
birthday: '1994-01-01',
email:'[email protected]',
intro:''
}, {
name:'notnull',
birthday:'date',
email:'email',
intro:'notnull'
});
<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
- pv-form form to be validated
- pv-rule validation rules
- pv-name gives the verification content a name
- pv-attr is used to obtain the verified text, the default value is value, and the optional values are value, text, html, src, href
- pv-res When the verification fails, the verification dom element will have pv-res=fail
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,
purev.tip('date','Custom Date Tip');
purev('xxx','date').message;
purev.onOnePass = (result) => {
// ...
};
purev.onOneFail = (result) => {
// ...
};
onOnePass and onOneFail are singleton mode, if you need to set, please directly override these two attributes
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';
});
- IPureV
- ITextValidResult
- IJsonValidResult
- 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;
}
}