js 创建简单的表单同步验证器
2024-10-19 06:00:37
SyncValidate
declare const uni: any;
export interface SyncValidateOpt {
[key: string]: SyncValidateFunc[];
}
export interface SyncValidateFunc {
(input: string | number): string | undefined;
}
/**
* 同步验证器
*/
export class SyncValidate {
constructor(public readonly options: SyncValidateOpt) {}
/**
* 验证一个
*
* check({key: value})
* @param {Object} keyVal
*/
check(keyVal: { [key: string]: string | number }): boolean {
const keys = Object.keys(keyVal);
if (!keys.length) {
throw new Error("至少的验证一个.");
}
// 只验证一个
const key = keys[0];
const val = keyVal[key];
if (!this.options.hasOwnProperty(key)) {
throw new Error(`没有设置[${key}]的验证器.`);
}
for (let v of this.options[key]) {
const errorMessage = v(val);
if (errorMessage) {
if (
this.validateErrorListener &&
typeof this.validateErrorListener === "function"
) {
this.validateErrorListener(errorMessage);
} else {
SyncValidate.validateErrorListener(errorMessage);
}
// 验证失败立即返回
return false;
}
}
// 验证ok返回true
return true;
}
/**
* 验证多个
* @param keysVals
*/
checkAll(keysVals: { [key: string]: string | number }): boolean {
for (let key in keysVals) {
if (this.check({ [key]: keysVals[key] }) === false) {
return false;
}
}
return true;
}
// 默认的验证错误时的回调函数
static validateErrorListener(errorMessage: string) {
uni.showToast({
icon: "none",
title: errorMessage,
duration: 1500,
});
}
private validateErrorListener?: (errorMessage: string) => void;
// 添加验证错误时的回调函数
addValidateErrorListener(
validateErrorListener: (errorMessage: string) => void
) {
this.validateErrorListener = validateErrorListener;
}
// 必填
static required(msg: string): SyncValidateFunc {
return (input) => {
if (!input) return msg;
};
}
// 最小长度
static minLength(len: number, msg: string): SyncValidateFunc {
return (input) => {
if (typeof input === "string" && input.length < len) return msg;
};
}
// 最大长度
static maxLength(len: number, msg: string): SyncValidateFunc {
return (input) => {
if (typeof input === "string" && input.length > len) return msg;
};
}
// 简单的验证手机号
static phone(msg: string, exp?: RegExp): SyncValidateFunc {
const phoneExp =
exp ??
/^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
return (input) => {
if (typeof input === "string" && !input.match(phoneExp)) {
return msg;
}
};
}
// 简单的判断相等
static eql(data: any, msg: string): SyncValidateFunc {
return (input) => {
if (input !== data) return msg;
};
}
// 简单的判断相等
static equal(data: any, msg: string): SyncValidateFunc {
return (input) => {
if (input != data) return msg;
};
}
}
使用
const syncValidate = new SyncValidate({
username: [
SyncValidate.required('用户名不能为空!'),
SyncValidate.phone('请输入正确手机号!'),
],
password: [
SyncValidate.required('密码不能为空!'),
SyncValidate.minLength(8, '密码长度必须大于7'),
]
});
syncValidate.addValidateErrorListener((errorMessage) => {
uni.showToast({
icon: 'none',
title: errorMessage,
duration: 1500
});
})
onLogin() {
if (
!syncValidate.check({username: this.username.trim()})
||
!syncValidate.check({password: this.password.trim()})
)
{
return;
}
...
}
js:
class SyncValidate {
constructor(options) {
this.options = options;
}
check(keyVal) {
const keys = Object.keys(keyVal);
if (!keys.length) {
throw new Error("至少的验证一个.");
}
const key = keys[0];
const val = keyVal[key];
if (!this.options.hasOwnProperty(key)) {
throw new Error(`没有设置[${key}]的验证器.`);
}
for (let v of this.options[key]) {
const errorMessage = v(val);
if (errorMessage) {
if (this.validateErrorListener &&
typeof this.validateErrorListener === "function") {
this.validateErrorListener(errorMessage);
}
else {
SyncValidate.validateErrorListener(errorMessage);
}
return false;
}
}
return true;
}
checkAll(keysVals) {
for (let key in keysVals) {
if (this.check({ [key]: keysVals[key] }) === false) {
return false;
}
}
return true;
}
static validateErrorListener(errorMessage) {
uni.showToast({
icon: "none",
title: errorMessage,
duration: 1500,
});
}
addValidateErrorListener(validateErrorListener) {
this.validateErrorListener = validateErrorListener;
}
static required(msg) {
return (input) => {
if (!input)
return msg;
};
}
static minLength(len, msg) {
return (input) => {
if (typeof input === "string" && input.length < len)
return msg;
};
}
static maxLength(len, msg) {
return (input) => {
if (typeof input === "string" && input.length > len)
return msg;
};
}
static phone(msg, exp) {
const phoneExp = exp ??
/^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
return (input) => {
if (typeof input === "string" && !input.match(phoneExp)) {
return msg;
}
};
}
static eql(data, msg) {
return (input) => {
if (input !== data)
return msg;
};
}
static equal(data, msg) {
return (input) => {
if (input != data)
return msg;
};
}
}
最新文章
- C# 项目提交过程中感受
- 常见的JAVA包
- GhostDoc Pro v4.9.14093.Cracked.By.SubMain 一款好用的代码注释生成工具——VS插件
- Ue4中的框选函数
- 【服务器环境搭建-Centos】常用系统命令篇
- Gitlab安装和使用相关信息
- 洛谷 P1040 加分二叉树
- IOS科研IOS开发笔记学习基础知识
- [Dev Blog] KCV插件 —— Provissy Tools 。
- 装饰模式（Decorator）
- uva 1583
- Typescript 学习笔记四：回忆ES5 中的类
- 第七十七课 最小生成树（Kruskal）
- c++ auto 理解
- CentOS7系统更换YUM Repo源
- “北航Clubs” Alpha版发布！
- GoWeb_01：GoWeb基础之mac上mysql安装
- SQL Server Job
- [Luogu 2024] 食物链
- aws rds