jQuery如何封装输入框插件

2020-05-23 06:22:13易采站长站整理

},

(6)长度校验:通过读取输入框值的长度规则,来校验输入长度的正确性


//检验输入框输入长度
_checkLenght: function() {
var _this = this,
inputLength = _this.length,
//8-32这种格式的范围
currentLength = _this.getValue().length,
// 长度是否在范围内
lengthFlag = true;
if (/^d+-d+$/.test(inputLength)) {
// 区间范围
var valueRange = inputLength.split('-');
//当前值长度小于设定范围
if (parseInt(valueRange[0], 10) > currentLength) {
lengthFlag = false;
}
//当前值长度大于设定范围,屏蔽输入
if (currentLength > parseInt(valueRange[1], 10)) {
_this.setValue(_this.getValue().substring(0, parseInt(valueRange[1], 10)));
}
} else if (/^d+$/.test(inputLength)) {
// 固定长度
// 当前长度不等于设定长度
if (currentLength !== parseInt(inputLength, 10)) {
lengthFlag = false;
}
}
// 长度不在区间飘红
if (!lengthFlag) {
_this._setStatus(_this.input, 'error');
} else {
_this._setStatus(_this.input, 'focus');
}
},

(7)设置输入框状态:根据校验的结果,显示不同的状态


//设置输入框状态,正确,错误,失去焦点,获得焦点
_setStatus: function(inputObj, status) {
$(inputObj).removeClass('input_text_focus input_text_blur input_text_right input_text_error');
$(inputObj).siblings('.input_result').removeClass('input_result_right input_result_error');
if (status === "right") {
$(inputObj).addClass('input_text_right');
$(inputObj).siblings('.input_result').addClass('input_result_right').text('√');
} else if (status === "error") {
$(inputObj).addClass('input_text_error')
$(inputObj).siblings('.input_result').addClass('input_result_error').text('×');
} else if (status === "blur") {
$(inputObj).addClass('input_text_blur');
} else if (status === "focus") {
$(inputObj).addClass('input_text_focus');
}
},

(8)设置输入框大小:提供了简单的接口设置输入框的大小small,big,或者数字


//设置输入框大小
setSize: function(size) {
var _this = this;
var scaleSize = 1;
if (size === 'small') {
scaleSize = 0.8;
} else if (size === 'big') {
scaleSize = 1.2;
} else if (parseInt(size, 10) !== NaN) {
scaleSize = parseInt(size, 10)
};
_this.container.css('transform', 'scale(' + scaleSize + ')');
},

(9)置灰操作:禁止输入任何内容


//输入框置灰
setGrey: function(flag) {
var _this = this;
if (flag) {
_this.input.prop('readonly', '');
} else {
_this.input.removeAttr('readonly');
}
},