基于promise的正则匹配注册模块实现
今天在公司写了一个注册功能,给注册增加了正则验证,实现方式使用的是promise,本来使用的很早粗暴的方式,就是直接硬写,但是有强迫症的我顺手优化了一下。
环境
vue uniapp
需求
- 给手机号使用正则进行验证;
- 给密码使用正则进行验证;
- 使用Promise进行链式调用;
- 验证结果要提示给用户
开始搞
1. 先写正则
1.1 百度整个正则
// 密码验证
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}$/
//手机号验证
/^1[34578][0-9]{9}$/
1.2 验证函数
// 手机
function reg_password(value){
const rule = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}$/
return rule.test(value)
}
// 密码 8-12位,含大小写字母和数字,可使用特殊字符
function reg_mobile(value){
const rule = /^1[34578][0-9]{9}$/
return rule.test(value)
}
// 是否完整填写完表单
function isComplete(){
if(this.mobile &&this.nickName &&this.password &&this.passwordConfirm &&this.userName){
if(this.password !== this.passwordConfirm){
return(["","两次输入的密码不一致,请重新输入",false])
}else{
return(["","",true])
}
}else{
return(["2","请将信息填写完整",false])
}
}
1.3 调用验证函数
if(this.isComplete()){
if(this.reg_mobile()){
if(this.reg_password()){
...
}
}else{
...
}
}else{
...
}
但是这样写下来虽然好使,但是不是有点low,是,那我们接下来就优化代码。
1.4 使用策略模式优化代码结构( 一种设计模式 )
策略模式是一种简单的设计模式,我们可以实现定义好规则,然后使用的时候直接获取其中的某一条来执行,这样就不会使用大量大if else了
// 策略模式
var rule = {
add:()=>"add",
del:()=>"del",
ref:()=>"ref",
}
2开始优化
2.1 使用策略模式定义规则
const options ={
// 基本验证 是否填写完整 密码是否一致
isComplete: ()=>{
if(this.mobile &&this.nickName &&this.password &&this.passwordConfirm &&this.userName){
if(this.password !== this.passwordConfirm){
return(["","两次输入的密码不一致,请重新输入",false])
}else{
return(["","",true])
}
}else{
return(["2","请将信息填写完整",false])
}
},
// 密码验证
passwordREG : (key,message,value)=>{
const resultREG = [key, message, (/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}$/).test(value)]
return resultREG[2];
},
// 手机号验证
mobileREGL: (key, message, value)=>{
const resultREG = [key, message, (/^1[34578][0-9]{9}$/).test(value)];
return resultREG[2];
}
}
根据传参调用规则实现验证
传入不同的参数就可以调用对应的函数
options['isComplete']();
options['passwordREG'](this.password);
options['mobileREGL'](this.mobile);
在调用之后处理一下回调就可以了,如果都是 true 那就可以调用接口了,如果是 false 就要提示用户重新输入
至此完成所有代码,可以git push 了 😎🐱💻
🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁
🎁 🎁
🎁 🎁🎁🎁🎁 🎁🎁🎁🎁 🎁
🎁 🎁🎁 🎁🎁🎁 🎁🎁 🎁
🎁 🎁 🎁🎁 🎁 🎁
🎁 🎁 🎁
🎁 🎁
🎁 🎁🎁🎁🎁🎁🎁🎁🎁🎁 🎁
🎁 🎁 🎁🎁 🎁🎁 🎁 🎁
🎁 🎁🎁🎁🎁🎁🎁🎁🎁🎁 🎁
🎁 🎁
🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁
等等真的可以push吗?🐱🚀
难道就没有改进的地方吗?🐱🏍
肯定是有的,请看-----------🐱🐉=====++++++🐱👤
优化方式
1. 使用Promise链式调用
使用 Promise 可以很方便的逐个调用我们的函数,可以很方便的处理错误。
isComplete: ()=>{
return new Promise((resolve,reject)=>{
if(this.mobile &&this.nickName &&this.password &&this.passwordConfirm &&this.userName){
if(this.password !== this.passwordConfirm){
reject(["","两次输入的密码不一致,请重新输入",false])
}else{
resolve(["","",true])
}
}else{
reject(["2","请将信息填写完整",false])
}
})
},
// 密码验证
passwordREG : (key,message,value)=>{
return new Promise((resolve, reject)=>{
const resultREG = [key,
message,
(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}$/).test(value)]
resultREG[2]? resolve(resultREG) : reject(resultREG);
// if(resultREG[2]){
// resolve(resultREG)
// }else{
// reject(resultREG)
// }
})
},
// 手机号验证
mobileREGL: (key, message, value)=>{
return new Promise((resolve, reject)=>{
const resultREG = [key, message, (/^1[34578][0-9]{9}$/).test(value)]
resultREG[2]? resolve(resultREG) : reject(resultREG);
// if(resultREG[2]){
// resolve(resultREG)
// }else{
// reject(resultREG)
// }
})
}
相信细心的同学们已经发现了,(/^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,12}$/).test(string) 这个是啥?
const rule = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}$/;
return rule.test(string);
==>
return (/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}$/).test(string)
直接两行变一行 哈哈哈
首先返回一个 new Promise()
然后参数是 resolve 和 reject , 第一个是成功的函数,第二个是失败的返回函数
用来传给下一个 Promise
1.2 升级调用规则的代码
由于我们一次要调用三个Promise,所以我们使用Promise.all( )像里面传入数组就可以按顺序执行啦
// promise.all 执行数组
const arrREG = [
options['isComplete'](),
options['passwordREG'](
"密码",
"格式不正确,请输入8-12位,含大小写字母和数字,可使用特殊字符的密码",
this.password
),
options['mobileREGL']("手机号", "格式不正确,请输入正确手机号", this.mobile)
]
首先使用了 ES6里面的扩展运算符 …[] 展开当前数组,把上面的三个Promise穿里面
// 逐条验证 用户输入数据
var ret = false;
var _this = this;
return Promise.all([...arrREG]).then((result)=>{
// 定义一个标识来获得Promise返回的结果,返回这个数给上层函数
result.forEach(item=>{
_this.ret = item[2]
})
return _this.ret
}).catch((err)=>{
_this.ret = err[2]
// 给用户返回错误信息
_this.Message("i am erring")
return _this
})