策略模式——表单校验

简介

策略模式的定义是：定义一系列的算法，把它们一个个的封装起来，并且使它们可以相互替换。

文件结构

• Validator
  • validator.js
  • errorMsg.js
  • strategy.js

创建策略处理类Validator

<!--策略处理类文件(validator.js)-->
let Validator = function () {
    <!--cache保存策略方法-->
    this.cache = new Map()
    <!--策略数组-->
    this.strategies = {
        <!--判空-->
        'isNonEmpty': function (value, errorMsg) {
            if (value === '') {
                return errorMsg
            }
        },
        <!--最小长度-->
        'minLength': function (value, length, errorMsg) {
            if (value.length < length) {
                return errorMsg
            }
        },
        <!--校验长度-->
        'length': function (value, length, errorMsg) {
            if (value.length !== parseInt(length)) {
				return errorMsg
			}
        }
        <!--手机号校验-->
        'isMobile': function (value, errorMsg) {
            if (!/(^1[3|5|7|8][0-9]{9})$/.test(value)) {
				return errorMsg
			}
        },
        <!--身份证规则校验-->
        'idCardValid': function (value, errorMsg) {
            <!--身份证规则校验-->
	    let checkID = function (val) {
	        if(checkCode(val)) {
	            var date = val.substring(6,14);
	            if(checkDate(date)) {
	                if(checkProv(val.substring(0,2))) {
	                    return true;
	                }
	            }
	        }
	        return false;
	    }
		<!--省级地址码校验-->
	    let checkProv = function (val) {
	        let pattern = /^[1-9][0-9]/;
	        let provs = {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门"};
	        if(pattern.test(val)) {
	            if(provs[val]) {
	                return true;
	            }
	        }
	        return false;
	    }
	    <!--出生日期码校验-->
	    let checkDate = function (val) {
	        let pattern = /^(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)$/;
	        if(pattern.test(val)) {
	            let year = val.substring(0, 4);
	            let month = val.substring(4, 6);
	            let date = val.substring(6, 8);
	            let date2 = new Date(year+"-"+month+"-"+date);
	            if(date2 && date2.getMonth() == (parseInt(month) - 1)) {
	                return true;
	            }
	        }
	        return false;
	    }
	    <!--校验码校验-->
	    let checkCode = function (val) {
	        let p = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
	        let factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];
	        let parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ];
	        let code = val.substring(17);
	        if(p.test(val)) {
	            let sum = 0;
	            for(let i=0; i<17; i++) {
	                sum += val[i]*factor[i];
	            }
	            if(parity[sum % 11] == code.toUpperCase()) {
	                return true;
	            }
	        }
	        return false;
	    }

	    if (!checkID(value)) {
	    	return errorMsg
	    }
        }
    }
}
<!--选项添加校验规则-->
Validator.prototype.add = function (value, rule, errorMsg) {
    let _this = this
	let args = rule.split(':')
	let rules = []
	
	rules.push(function () {
		let strategy = args.shift()
		args.unshift(value)
		args.push(errorMsg)
		return _this.strategies[strategy].apply(value, args)
	})
	
	this.cache.set(value, rules)
}
<!--执行校验项函数-->
Validator.prototype.start = function (value) {
    let results = []
    let rules = this.cache.get(value)
    
    if (rules.length > 0) {
        for (let i = 0, validatorFun; validatorFun = rules[i]; i++) {
            let result = validatorFun()
            
            if (result) {
                results.push(result)
            }
        }
        
        return results
    }
}
<!--清空校验函数数组-->
Validator.prototype.clear = function (value) {
    this.cache.set(value, [])
}

export default Validator

创建检验失败的异常提示文件(errorMsg.js)

export default {
    'storeName': '门店名称不可少于3个字符',
    'storePoiName': '请选择门店地址',
    'storedDetailAddr': '请填写门店详细地址',
    'storeType': '请选择门店类型',
    'storeTime': '请选择门店营业时间',
    'licenceNum': '请填写营业执照号',
    'licencePicUrl': '请上传营业执照号照片',
    'storePics': '请按要求上传经营场所照片',
    'realName': '请输入用户名',
    'realPhone': '请输入正确的手机号'
}

创建表单校验策略文件(strategy.js)

export default {
    'storeName': 'minLength:3',
    'storePoiName': 'isNonEmpty',
    'storedDetailAddr': 'isNonEmpty',
    'storeType': 'isNonEmpty',
    'storeTime': 'isNonEmpty',
    'licenceNum': 'length:18',
    'licencePicUrl': 'length:1',
    'storePics': 'length:5',
    'realName': 'isNonEmpty',
    'realPhone': 'isMobile'
}

业务处理文件(storeInfo.js), 引入策略类, 给各表单添加处理逻辑

import Validator from './Validator/validator.js'
import ERRORMSG from './Validator/errorMsg.js'
import STRATEGY from './Validator/strategy.js'

let validData = new Validator()
let results = []

validData.clear(this.storeName)
validData.add(this.storeName, STRATEGY['storeName'], ERRORMSG['storeName'])
let storeNameResults =  validData.start(this.storeName)[0]
if (storeNameResults) {
    results.push(storeNameResults)
}
...

validData.clear(this.licenceNum)
validData.add(this.licenceNum, STRATEGY['licenceNum'], ERRORMSG['licenceNum'])
let licenceNumResults = validData.start(this.licenceNum)[0]
if (licenceNumResults) {
    results.push(licenceNumResults)
}
...
<!--vant的Toast提示校验结果-->
if (results.length > 0) {
    this.$toast(results[0])
} else {
    ...
    <!--提交注册标签-->
}

参考书籍

1. 《Javascrip设计模式与开发实践》