进行web前端开发,会经常遇到校验文本框内容的情形.比如校验用户输入的手机号是否合法.

其实我们可以从根本上减少用户犯错的机会,比如文本框只能输入数字,若输入非数字字符,则马上被删除.

界面:

第一个文本框,输入字母时会立即把字母替换为空字符串.

核心js方法:

/*

* 只能输入正整数,不能有小数点

*

*/

onlyIntegerKeyUp=function(e){

if(e===undefined){

e=window.event;

}

var obj=e.srcElement?e.srcElement:e.target;

var pattern = /[^\d]/ig;

var val=obj.value;

if(pattern.test(val)) {

var i=getCursortPosition(e);

obj.value=val.replace(pattern,'');

setCaretPosition(e,i);

}

};

/*******************************************************************************

* 获取光标位置

*

* @param ctrl

* @returns {Number}

*/

getCursortPosition=function(event) {// 获取光标位置函数

if (event === undefined || event === null) {

event = arguments.callee.caller.arguments[0] || window.event;

}

var obj = event.srcElement?event.srcElement:event.target;

var CaretPos = 0;// IE Support

if (document.selection) {

obj.focus ();

var Sel = document.selection.createRange ();

Sel.moveStart ('character', -obj.value.length);

CaretPos = Sel.text.length;

} else if (obj.selectionStart || obj.selectionStart == '0'){

// Firefox support

CaretPos = obj.selectionStart;

}

return (CaretPos);

};

/*******************************************************************************

* 设置光标位置

*

* @param ctrl

* @returns {Number}

*/

setCaretPosition=function(event, pos){// 设置光标位置函数

if (event === undefined || event === null) {

event = arguments.callee.caller.arguments[0] || window.event;

}

var obj = event.srcElement?event.srcElement:event.target;

if (pos > 0) {

pos = pos - 1;//因为把不匹配的字符删除之后,光标会往后移动一个位置

}

if(obj.setSelectionRange){

obj.focus();

obj.setSelectionRange(pos,pos);

} else if (obj.createTextRange) {

var range = obj.createTextRange();

range.collapse(true);

range.moveEnd('character', pos);

range.moveStart('character', pos);

range.select();

}

};

/*

* 只能输入数字和字母

*

*/

onlyNumAndAlphKeyUp=function(event){

if(event===undefined){

event=window.event;

}

var obj=event.srcElement?event.srcElement:event.target;

var pattern = /[^\w]/ig;

if(pattern.test(obj.value)) {

var i=getCursortPosition(event);

obj.value=obj.value.replace(pattern,'');

setCaretPosition(event,i);

}

};

页面代码:

只能输入数字:

只能输入数字和字母:

为什么会有getCursortPosition()和setCaretPosition()

因为通过js替换非法字符之后,光标的位置变化了.所以这两个方法用于在替换之前保存(记录)光标位置,替换之后恢复光标位置.

comm.js见附件