react 指令封装 - validator校验
2023-04-18 14:44:43 时间
react 指令封装 - validator校验
React validator 封装
因form
表单校验,可以引入针对于form表单的校验,但是个人嫌弃其他文件的校验方式引用文件比较大,所以自己封装了个简单的检验方式,而react又没有指令这个概念,所以个人仿照vue 的指令,简单的封装 了一个 validator 的检验方式。
优点:
1、体积小,未压缩前3k,简单实现了非空校验跟正则校验。
2、相对灵活,兼容性好,不管是放到vue 还是 react 或者是原生js,都可以正常使用 。
3、易维护
下面附上代码:
directives.js(核心)文件
export default {
//正则表
regList: {
SmsCode: /^d{6}$/,
/*短信正则*/
Password: /(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}/,
/*密码正则*/
Mobile: /^[1][34578][0-9]{9}$/,
/*手机号正则*/
RealName: /^[u4e00-u9fa5 ]{2,10}$/,
/*真实姓名正则*/
WeiXin: /^[a-zA-Zd_]{5,19}$/,
BankNum: /^d{10,19}$/,
/*银行卡号正则*/
Money: /^([1-9]d*|0)$/,
/*钱正则*/
Mail: /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/ /*邮件正则*/
},
showErr(name, checkResult) {
var type = checkResult[0],
ext = checkResult[1] || [];
var ERR_MSG = {
nonvoid: `${name}不能为空`,
reg: `${name}格式错误`,
limit: `${name}必须在${ext[0]}与${ext[1]}之间`,
equal: `两次${ext}不相同`,
unique: `${name}重复`
}
//提示信息alert()
libUtils.toast(ERR_MSG[type]);
},
sync(_that, cb) { //负责绑定onchange事件
let domList = document.querySelector(".va");
if(!domList) return;
/**
* 禁止粘贴
*/
domList.onpaste = (e) => {
if(e.target.type === "password") { //密码框,禁止粘贴
return false; //结束执行
}
}
domList.addEventListener("input", (e) => { //这个是赋值操作
let type = e.target.type;
if(type === "tel" || type === "number") { //防止输入中文符号、特殊字符
e.target.value = e.target.value.replace(/D/g, '');
}
if(cb) cb(e.target);
});
},
bind(cb) {
let domList = document.querySelectorAll(".va input");
for(let i = 0; i < domList.length; i++) {
let dom = domList[i],
name = dom.name,
value = dom.value,
msg = domList[i].getAttribute("data-tag"),
va = domList[i].getAttribute("data-va").split(".");
let _result = this.check(value, va, msg);
if(_result.length > 0) {
this.showErr(msg, _result);
return;
}
}
if(cb) cb("校验成功!");
},
sendSmsCode(dom, cb) {
let va = dom.getAttribute("data-va").split("."),
value = dom.value,
msg = dom.getAttribute("data-tag");
let _result = this.check(value, va, msg);
if(_result.length > 0) {
this.showErr(msg, _result);
return;
}
if(cb) cb("手机号校验成功!");
},
check(v, va, msg) {
let res = 0,
cfg = {
//非空
nonvoid: (v, bool) => {
if(bool) {
return v.trim() ? 0 : ['nonvoid'];
} else {
return 0;
}
},
reg: (v, reg) => reg.test(v) ? 0 : ['reg'], //正则
}
//如果canNull有值,说明改输入框可以为空,但是有值之后需要校验正则
res = (va[1] || []) === "canNull" ? (v ? 0 : 2) : cfg['nonvoid'](v, true); //验证是否为空
if(!res) {
res = cfg['reg'](v, this.regList[va[0]]); //验证正则
}
return res;
}
}
ps:简单的封装了 ==非空校验跟正则校验==,看一看其实很简单。
把正则表达式,放一块统一处理,简单的实现了处理效果,下面附上使用:
1、首先需要在表单上放置 va ,例如:
简单实现效果:
示例1:
示例2:
好了,完美的使用吧!
如果有什么不合理的地方,可以给我留言,优化改进!
相关文章
- 【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下
- CLB运维&运营最佳实践 ---访问日志大洞察
- vnc方式登陆服务器
- 轻松学排序算法:眼睛直观感受几种常用排序算法
- 十二个经典的大数据项目
- 为什么使用 CDN 内容分发网络?
- 大数据——大数据默认端口号列表
- Weld 1.1.5.Final,JSR-299 的框架
- JavaFX 2012:彻底开源
- 提升as3程序性能的十大要点
- 通过凸面几何学进行独立于边际的在线多类学习
- 利用行动影响的规律性和部分已知的模型进行离线强化学习
- ModelLight:基于模型的交通信号控制的元强化学习
- 浅谈Visual Source Safe项目分支
- 基于先验知识的递归卡尔曼滤波的代理人联合状态和输入估计
- 结合网络结构和非线性恢复来提高声誉评估的性能
- 最佳实践丨云开发CloudBase多环境管理实践
- TimeVAE:用于生成多变量时间序列的变异自动编码器
- 具有线性阈值激活的神经网络:结构和算法
- 内网渗透之横向移动 -- 从域外向域内进行密码喷洒攻击