胖模式搜索框支持校验限制

背景

胖模式的校验架构是使用的jQuery的Validator插件，要使用的话需要先写一个表单，然后使用封装好的APF.addValidate去给该表单加上校验。

原先搜索框是都没有做校验的，如果按之前那套，一个页面存在多表单时会有bug，且用起来改动也比较大，所以打算另外封装一套支持单独配置的搜索框校验功能。

实现

使用方式

APF.bindInputValid({
    $element: me.ui.search,
    validMethod: ['ip_v6', 'mac'],
    msg: 'xxx',
    callback: function () {
        me.searchKey();
    }
});

只需传入需要绑定校验的元素、所需做的校验（注意这里沿用了之前写好的jq的校验）、可选的提示语（不传时使用原jq中写好的）、校验成功的回调函数，使用起来很方便。

之前通常都是在每个页面手写监听输入的回调，现在集成到bindInputValid中，使用者也无需写麻烦的监听函数了。

原理

监听状态

监听传入元素的按键状态，是enter时触发校验，校验成功才触发回调

同时监听值的变化状态，变化时也触发校验，保证用户能第一时间看到错误状态及信息。

校验

根据传入的校验方法名，挨个调用jQuery.validator.methods中原先已定义好的校验函数，避免又要整一套校验。

同时构造了假的上下文，避免原校验函数中的缺失对象的报错（只需走正则，不需要走框架的其它功能）

// 构造上下文，避免报错
var _this = {
	optional: function () {
		return false;
	}
}


jQuery.validator.methods[validMethod[i]].call(_this, val)

错误显示

如果校验失败，自动给传入的元素添加上customTip提示语，并调用系统中已有的悬浮提示功能组件，监听输入框的悬浮事件，在悬浮时显示配置在customTip字段的提示语。

并添加一个新的css类，用于控制样式变红

同样，校验成功时需移除上述内容

效果

总结

通过封装，可以快速的给单独的输入框添加上校验功能，提升开发效率。