基于promise的正则匹配注册模块实现

今天在公司写了一个注册功能，给注册增加了正则验证，实现方式使用的是promise，本来使用的很早粗暴的方式，就是直接硬写，但是有强迫症的我顺手优化了一下。

环境

vue uniapp

需求

1. 给手机号使用正则进行验证；
2. 给密码使用正则进行验证；
3. 使用Promise进行链式调用；
4. 验证结果要提示给用户

开始搞

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
})

怎么样？同学们，这个虽然看似有点麻烦，凡是等到规则多了起来，比如表单几乎每个input都有一种规则的时候就会非常简单，只需要不停的向options 里面添加规则就可以，然后加入数组里调用，这样就不用再写if else啦！！！