策略模式_前端验证

<!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> class Schema { constructor(descriptor) { this.descriptor = descriptor; } handleRule(val, rule) { const { key, params, message } = rule; let ruleMap = { required() { return !val; }, max() { return val.length > params; }, validator() { return params(val); }, }; let handler = ruleMap[key]; if (handler && handler()) { throw message; } } validate(data) { return new Promise((resolve, reject) => { let keys = Object.keys(data); let errors = []; for (let key of keys) { const ruleList = this.descriptor[key]; if (!Array.isArray(ruleList) || !ruleList.length) continue; const val = data[key]; for (let rule of ruleList) { try { this.handleRule(val, rule); } catch (e) { errors.push(e.toString()); } } } if (errors.length) { reject(errors); } else { resolve(); } }); } } const descriptor = { nickname: [{ key: "required", message: "请填写昵称" }, { key: "max", params: 6, message: "昵称最多6位字符" }, ], phone: [{ key: "required", message: "请填写电话号码" }, { key: "validator", params(val) { return !/^1\d{10}$/.test(val); }, message: "请填写正确的电话号码", }, ], }; // 开始校验 const validator = new Schema(descriptor); const params = { nickname: "232", phone: "123000" }; validator .validate(params) .then(() => { console.log("success"); }) .catch((e) => { console.log(e); }); </script> </body> </html>

网站名称：干货网
本站网址：www.120.team
版权声明：知识共享署名-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)协议进行许可
本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长删除处理。
转载时请以超链接形式标明文章原始出处和作者信息,谢谢合作。

THE END