//检验输入框输入长度 _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'); } },
（10）获取值，重置值实现
//获取输入框值 getValue: function() { return this.input.val(); }, //设置输入框值 setValue: function(str) { this.input.val(str); }
（11）定制化输入框接口
// 默认参数 $.fn.CreateInput.defaultValue = { // 输入框类型：text,password type: "text", //输入框规则 spec: null, //长度 length: null, //描述输入字段 placeholder: null, //是否必填 isRequired: false };
【如何调用】
//生成输入框 $("#username").CreateInput({ type: "text", spec: /^[0-9]\d*$/, length: '5-8', placeholder: '不能为空，只能输入数字，长度为5-8', isRequired: true }); //调用公有方法 var myInput = $("#username").data('CreateInput'); myInput.setValue("1245");
以上所述是小编给大家介绍的jQuery如何封装输入框插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: