AngularJS-compareDirective.js 验证指令
这是一个封装的验证指令，比如在注册页面比较两次密码输入的是否一致，或者第一项是否大于第二项等等。
这个指令是看阿里的一个大神视频中学到的，里面除了修改一小部分，大部分都的逻辑结构都是和视频中一样的，看了视频收获很大，也发现了自己的一些问题
在工作中时常会碰到一些重复的页面，例如这次注册页面，有很多页面的逻辑其实都是相同的。为了提高效率，不妨把这些相同点都抽象出来，做成一个插件，以后用的时候，直接拿来用，效率会提高不少。
正好angular的自定义指令可以达到这个效果，把一些常用的逻辑都封装成一个个指令，以后在不同的项目上，直接引用即可。
下面来看一下代码：（并非原创）
/** * 获取字段值 * @param {Object} obj 当前指令所在作用域 * @param {String} key 支持xx.xxx.xx类似的形式 * @return {Object} 对应的值 */ function getFieldValue(obj, key) { } /** * 继承方法 * @param {Function} superClass 父类 * @param {Function} subClass 子类 */ function inherit(superClass, subClass) { var prototype = Object.create(superClass.prototype); prototype.constructor = subClass; subClass.prototype = prototype; } /** * 比较器策略类 * @param {string} operator 比较器 * @param {any} value 原始值 * @param {any} compareTo 比较值 */ function ValueCompareStrategy(operator, value, compareTo) { this.operator = operator; this.value = this.getValue(value); this.compareTo = this.getCompareTo(compareTo); } /** * 将不同的比较器注册到ValueCompareStrategy * @param {String} dataType 比较器类型 * @param {Function} fun 比较器构造函数 */ ValueCompareStrategy.regist = function (dataType, fun) { if (this[dataType]) { return false; } this[dataType] = fun; } /** * 根据数据类型，获取对应的比较器构造函数 * @param {String} dataType 数据类型 * @returns {Function} 数据类型对应的构造函数 */ ValueCompareStrategy.get = function (dataType) { return ValueCompareStrategy[dataType] || ValueCompareStrategy; } /** * 获取比较值，该值为比较操作左边的元素 * @param {any} value 比较数 * @returns {any} {*} 经过格式转换的值 */ ValueCompareStrategy.prototype.getValue = function (value) { return value } /** * 获取比较值，该值为比较操作右边的元素 * @param {any} compareTo 被比较值 * @returns {any} {*} 经过格式转换的比较值 */ ValueCompareStrategy.prototype.getCompareTo = function (compareTo) { return compareTo; } /** * 默认的比较方法 * @param {String} op 比较操作符 * @param {any} value 比较值 * @param {any} compareTo 呗比较值 * @returns {boolean} 经过格式转换的比较值 */ ValueCompareStrategy.prototype.compare = function (op, value, compareTo) { var value = this.value, compareTo = this.compareTo, result = true; switch (op) { case 'eq': result = (compareTo == value); break; case 'eqeqeq': result = (compareTo == value); break; case 'lt': result = (value < compareTo); break; case 'gt': result = (value > compareTo); break; case 'le': result = (value <= compareTo); break; case 'ge': result = (value >= compareTo); break; } return result; } /** * 验证比较值和被比较值是否合法，如果不揭发，则应该吧字段合法性的验证权交给下一个表单校验器 * @returns {boolean} 是否合法 */ ValueCompareStrategy.prototype.valueValidate = function () { return true; } /** * 初始化比较器 * 注意：做扩展时，需要首先定义对应数据格式的构造器，然后在该函数中添加对应的datatype即可 * @return {[type]} [description] */ function initValidateCompare() { /** * 支持比较数据类型常量 * @type {Object} */ var CONST = { DATATYPES: { number: NumberCompare, date: DateCompare } } var dataTypes = CONST.DATATYPES, constructor = ""; //将不同数据格式的比较器注册，并且继承默认的比较器策略类 for (var dataType in dataTypes) { if (dataTypes.hasOwnProperty(dataType)) { //? constructor = dataTypes[dataType]; ValueCompareStrategy.regist(dataType, constructor); inherit(ValueCompareStrategy, constructor); } } } initValidateCompare(); function NumberCompare() { ValueCompareStrategy.apply(this, Array.prototype.slice.call(arguments, 0)); } NumberCompare.prototype.getValue = function (value) { return value * 1; } NumberCompare.prototype.getCompareTo = function (compareTo) { return compareTo * 1; } NumberCompare.prototype.valuesValidate = function () { return this.value === this.value && this.compareTo === this.compareTo; } function DateCompare() { ValueCompareStrategy.apply(this.Array.prototype.slice.call(arguments, 0)); this.originValue = arguments[1]; this.originCompareToValue = arguments[2]; } DateCompare.prototype.getValue = function (value) { if (angular.isString(value)) { value = Date.parse(value); } else if (angular.isDate(value)) { value = value.getTime(); } else { //如果value的值不是时间字符串或者时间对象，则直接乘1做转换， //如果值是合法的数字，则不会对结果产生影响，如果值是NaN，则会在合法性中判断返回false，会把控制器交给其他验证器 value = value * 1; } return value; } DateCompare.prototype.getCompareTo = function (value) { if (angular.isString(value)) { value = Date.parse(value); } else if (angular.isDate(value)) { value = value.getTime(); } else { //如果value的值不是时间字符串或者时间对象，则直接乘1做转换， //如果值是合法的数字，则不会对结果产生影响，如果值是NaN，则会在合法性中判断返回false，会把控制器交给其他验证器 value = value * 1; } return value; } DateCompare.prototype.valueValidate = function () { return this.value === this.value && this.compareTo === this.compareTo; } angular.module('liveApp.directives').directive('compare', function () { return { require: 'ngModel', link: function (scope, el, attrs, ctrl) { var dataType = attrs.compareDataType || 'number'; var CompareHandler = ValueCompareStrategy.get(dataType); var compare = attrs.compare; // var obj = scope;//scope[attrs.compare] //var watch = attrs.watchCompareField; var watch=true; //暂时所有都监视 var op = attrs.compareOperation; if (watch !== false) { scope.$watch(compare, function () { var fromWatch = true; var value = ctrl.$modelValue; compareFiledValue(value, fromWatch); }) } ctrl.$parsers.unshift(compareFiledValue); //添加对当前指令的字段进行监控 function compareFiledValue(value, fromWatch) { /*如果是被监控字段的变化，则被监控字段变化所引起的当前字段的验证行为只做“通过”动作，不做“不通过的动作， 原因：如果不这样设定，则会出现其他字段编辑引发当前字段提示错误的情况，不符合自然思维。 相反，其他字段编辑从而使当前字段的值合法，则应该去掉当前字段的错误提示*/ //if (fromWatch) { // ctrl.$setValidity('compare', true); // return value; //} //ctrl.$setValidity('compare', true); //字段值为空时，不走比较逻辑，直接把合法性判断控制权交给下一个表单验证器。 if (value === undefined) { return value; } var compareTo = scope.$eval(compare); if (compareTo === undefined) { return value; } var compareHandler = new CompareHandler(op, value, compareTo); //两个比较字段的值不合法时 （比如格式不对，比如不是数字，比如不是object等等），也不走比较逻辑（因为肯定有其他的表单验证器 //if (!compareHandler.valuesValidate()) { // return true; //} var result = compareHandler.compare(op); ctrl.$setValidity('compare', result); return value; } } } })
基本用到了工厂模式，对每种类型的比较进行处理，页面中的使用也很方便，例如注册时密码和确认密码的比较：
<div class="form-group"> <div class="col-xs-12"> <input required password-valid name="password" type="password" class="form-control" ng-model="User.PassWord" placeholder="密码"/> </div> </div> <div class="form-group"> <div class="col-xs-12"> <input required watch-compare-field="{{true}}" name="passwordrepeat" ng-model="User.pwdRepeat" compare="User.PassWord" compare-data-type="string" compare-operation="eqeqeq" type="password" class="form-control" placeholder="确认密码"/> </div> </div>
因为项目是一个小例子，所以指令中的逻辑不会很全面，可以自行添加用到的逻辑。整理成自己的一个指令库。
