jQuery插件:只接受指定输入的文本框.
最近做了一个jQuery得插件,用来限制文本框的输入,做着玩玩,实用性感觉不是非常大,大家多提提意见.我的代码写的挺简单,觉得对像我这样的jQ新手写插件很有帮助.
功能简介:能够阻止用户输入非法字符(目前为止大小写尚不支持),能够阻止指定的模式下的阻止列表中出现的字符.
开发中遇到的问题:
(1):javascript中正则表达式的test方法,你可以做个试验:
var str1 = "asdf";
var reg = /asdf/g;
alert(reg.test(str1));
alert(reg.test(str1));
alert(reg.test(str1));
alert(reg.test(str1));
结果是什么?
不要惊讶,因为reg有一个lastIndex成员记录着上次test的位置,所以下次test的时候就会从lastIndex开始,所以,每次都要对lastIndex进行复位.
插件代码:
Code1 (function($) {
2 $.extend($.fn, {
3 specialTextBox: function(setting) {
4 var textSetting = $.extend({
5 maxLength: 100,
6 minLength: 0,
7 // type可接收all-不做任何处理,letter-只接受字母,low_letter,big_letter,float-数字和小数点,int-数字,custom
8 model: "all",
9 // 只接受char数组,只有当model为custom的时候该项才会有效
10 permit: [],
11 // 只接受char数据
12 reject: [],
13 defaultText: ""
14 }, setting || {});
15
16
17 // 匹配正则
18 var regExp = [/^(?:.|\s)*$/g, /^[a-zA-Z]*$/g, /^[a-z]*$/g, /^[A-Z]*$/g, /^([0-9]+(\.+[0-9])?)?$/g, /^[0-9]*$/g];
19
20 var regPermit = new RegExp("^(" + textSetting.permit.join("|") + ")*$");
21
22 function judgePermit(ch) {
23 regPermit.lastIndex = 0; // 复位正则表达式
24 return regPermit.test(ch);
25 }
26
27 // 是否属于拒绝列表
28 function judgeReject(ch) {
29 for (var i = 0; i < textSetting.reject.length; i++) {
30 if (ch == textSetting.reject[i])
31 return true;
32 }
33 return false;
34 }
35
36 // 是否有拒绝列表中的字符片段
37 function judgeRejectOver(str) {
38 for (var i = 0; i < textSetting.reject.length; i++) {
39 if (str.indexOf(textSetting.reject[i]) >= 0) {
40 return true;
41 }
42 }
43 return false;
44 }
45
46 function check(ch) {
47 var validChar = false;
48 switch (textSetting.model.toLowerCase()) {
49 case "all":
50 validChar = true;
51 break;
52 case "letter":
53 if (('A' <= ch && 'Z' >= ch) || ('a' <= ch && 'z' >= ch))
54 validChar = true;
55 break;
56 case "low_letter":
57 if ('a' <= ch && 'z' >= ch)
58 validChar = true;
59 break;
60 case "big_letter":
61 if ('A' <= ch && 'z' >= ch)
62 validChar = true;
63 break;
64 case "float":
65 if (('0' <= ch && '9' >= ch) || (ch == '.'))
66 validChar = true;
67 break;
68 case "int":
69 if ('0' <= ch && '9' >= ch)
70 validChar = true;
71 break;
72 case "custom":
73 validChar = judgePermit(ch);
74 break;
75 default:
76 validChar = true;
77 break;
78 }
79 if (validChar) validChar = !judgeReject(ch);
80 return validChar;
81 } // end check
82 // 输入完成后进行检验
83 function checkOver(str) {
84 var reg;
85 switch (textSetting.model.toLowerCase()) {
86 case "all":
87 reg = regExp[0];
88 break;
89 case "int":
90 reg = regExp[5];
91 break;
92 case "float":
93 reg = regExp[4];
94 break;
95 case "letter":
96 reg = regExp[1];
97 break;
98 case "big_legger":
99 reg = regExp[2];
100 break;
101 case "low_letter":
102 reg = regExp[3];
103 break;
104 case "custom": // 默认自定义不拦截
105 return (!judgeRejectOver(str)) && (regPermit.test(str));
106 default: // 默认不拦截
107 return true;
108 }
109 reg.lastIndex = 0; // 复位正则表达式(test在各次之间会记忆位置)
110 return reg.test(str);
111 }
112
113 // 复位颜色
114 function setOldColor(elem) {
115 var jqObj = $(elem);
116 var oldColor = jqObj.data("oldColor");
117 // 如果还没有缓存颜色.
118 if (!oldColor) {
119 oldColor = $(this).css("color");
120 if (!oldColor) oldColor = "inherit";
121 jqObj.data("oldColor", oldColor);
122 }
123 jqObj.css("color", oldColor);
124 }
125 // 设置警告色
126 function setWarnColor(elem) {
127 var jqObj = $(elem);
128 var oldColor = jqObj.data("oldColor");
129 if (!oldColor) {
130 oldColor = jqObj.css("oldColor");
131 if (!oldColor) oldColor = "inherit";
132 jqObj.data("oldColor", oldColor);
133 }
134 jqObj.css("color", "red");
135 }
136
137 // 针对一个string中的各个char进行check
138 function checkString(strForCheck) {
139 if (strForCheck) {
140 for (var i = 0; i < strForCheck.length; i++) {
141 if (!check(strForCheck.charAt(i))) {
142 return false;
143 }
144 }
145 return true;
146 } else {
147 return true;
148 }
149 }
150
151 return this.keypress(function() {
152 var charCode = window.event.keyCode;
153 var ch = String.fromCharCode(charCode);
154 if (ch) {
155 var isOk = check(ch);
156 return isOk;
157 }
158 return false;
159 })
160 .keyup(function() {
161 var value = this.value;
162 if (checkOver(value)) {
163 setOldColor(this);
164 } else {
165 setWarnColor(this);
166 }
167 })
168 .blur(function() {
169 var value = $(this).val();
170 var isOk = checkOver(value);
171 if (isOk)
172 setOldColor(this);
173 else {
174 $(this).focus();
175 setWarnColor(this);
176 }
177 });
178 }
179 });
180 })(jQuery);
插件使用方法:
$(...).specialTextBox({...});
此方法不会影响javascript的链式操作,不断链.
其中参数可以接受:
model:model可接收all-不做任何处理,letter-只接受字母,low_letter,big_letter,float-数字和小数点,int-数字,custom-自定义
permit: // 只接受char数组,表示可以接收的字符数组,但是该参数只有在model为custom的条件下才有效果
reject: // 只接受char数组,表示阻止列表,可以跟model配合使用,比如model指定为letter的时候可以指定不可以为X
示例一:
需求:只接受浮点型数据
代码:$("#txtTest1").specialTextBox({ model: "float"});
#txtTest1:
示例二:
需求:只接受指定列表中的字符,并阻止一些字符:
代码:$("#txtTest2").specialTextBox({ model: "custom",permit:['a','c','1','a'],reject:['a','b','1']});
