• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

设计模式--使用策略模式进行表单验证(微信小程序)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

## 使用策略模式进行表单效验
### 实习做微信小程序项目的时候曾经做过表单验证,多个页面共用一套校验规则,当时能力不够,不会封装。最近看了设计模式,就写了这个。

### 第一步:封装策略对象

var strategys = {
  \'isNotEmpty\': function (value, errorMsg) {
    if (value == \'\') return errorMsg;
  },
  \'minLength\': function (value, len, errorMsg) {
    if (value.length < len) return errorMsg;
  },
  \'mobileFormat\': function (value, errorMsg) {
    if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) return errorMsg;
  }
}

 

### 第二步:声明验证函数Validator

var Validator = function () {
  this.cache = [];
}

 

### 第三步:给Validator函数添加add和start方法。

Validator.prototype.add = function (value, rule, errorMsg) {
  //只有一个校验规则的时候
  var str = rule.split(\':\');//把minLength:6分割
  this.cache.push(function () {
    var strategy = str.shift();//删掉数组第一个元素,并返回被删除的元素
    str.unshift(value);//添加元素至数组第一位
    str.push(errorMsg);
    return strategys[strategy].apply(null, str)//把不定参传进校验函数
  })
}
Validator.prototype.start = function () {
  var validatorFunc = this.cache;
  var result = [];
  for (var i = 0; i < validatorFunc.length; i++) {
    var msg = validatorFunc[i]();//执行校验函数
    if (msg) result[i] = msg;
  }
  return result;
}


### 第四步:添加数据到校验规则,开始校验。

var validator = new util.Validator(); // 创建一个Validator对象
/* 添加一些效验规则 */
validator.add(this.data.username, \'isNotEmpty\', \'用户名不能为空\');
validator.add(this.data.password, \'minLength:6\', \'密码长度不能小于6位\');
validator.add(this.data.telephone, \'mobileFormat\', \'手机号码格式不正确\');
var errorMsg = validator.start(); // 获得效验结果
this.setData({ errorMsg: errorMsg})
if(errorMsg.length == 0)console.log("验证通过,ajax提交数据")

#### 参考链接:https://www.cnblogs.com/tugenhua0707/p/5198407.html#_labe7

GitHub地址:传送门


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap