<div class="input_container"> <input type="text" class="input_text input_text_blur" placeholder=""> <div class="input_result"></div> </div>
// 初始化插件
init: function() {
// 常用值存储
var _this = this;
_this.type = _this.settings.type;
_this.spec = _this.settings.spec;
_this.length = _this.settings.length;
_this.placeholder = _this.settings.placeholder;
_this.isRequired = _this.settings.isRequired;
// 初始化输入框DOM结构
_this._initInputDom();
},
_initInputDom: function() {
var _this = this,
inputContainer = $('<div></div>'),
inputContent = $('<input type="' + _this.type + '">'),
inputResult = $('<div></div>');
inputContainer.addClass('input_container');
inputContent.addClass('input_text input_text_blur');
inputResult.addClass('input_result');
inputContainer.append(inputContent);
inputContainer.append(inputResult);
_this.element.append(inputContainer);
// 记录当前需要操作的dom
_this.input = _this.element.find('input');
_this.container = _this.element.find('.input_container');
if (_this.placeholder !== null) {
//placeholder提示信息
_this.input.prop('placeholder', _this.placeholder);
}
_this._initEvent();
},
// 绑定事件
_initEvent: function() {
var _this = this;
// 获取焦点focus,失去焦点blur,值改变change
// 如果输入框只读的话就不操作
_this.input.focus(function() {
if (!$(this).attr('readonly')) {
_this._setStatus(this, 'focus');
}
}).blur(function() {
if (!$(this).attr('readonly')) {
if (_this.getValue() === '') {
if (_this.isRequired) {
// 必填项失去焦点
_this._setStatus(this, 'error');
} else {
// 非必填项失去焦点
_this._setStatus(this, 'blur');
}
} else {
// 有值得情况直接进行值校验
if (_this._checkSpec()) {
_this._setStatus(this, 'right');
} else {
_this._setStatus(this, 'error');
}
}
}
}).keyup(function() {
_this._checkLenght();
});;
},
//校验输入框输入内容
_checkSpec: function() {
var _this = this;
return _this.spec.test(_this.getValue());
},
//检验输入框输入长度
_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');
}
},
//设置输入框状态,正确,错误,失去焦点,获得焦点
_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');
}
},
//设置输入框大小
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 + ')');
},
//输入框置灰
setGrey: function(flag) {
var _this = this;
if (flag) {
_this.input.prop('readonly', '');
} else {
_this.input.removeAttr('readonly');
}
},
//获取输入框值
getValue: function() {
return this.input.val();
},
//设置输入框值
setValue: function(str) {
this.input.val(str);
}
// 默认参数
$.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");
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有