NO.5 JS常用页面数据录入校验方法(JavaScript Validation)

 

 知识库总目录： No.0 Web开发知识库

 

(迁移自三年前我的MSN Live space，顺便补一下空缺编号：)

让我们一起将错误掐死在录入页面上吧^^

--------------------------------------------------

现将页面常用的校验方法整理一下下,部分本人所写,请大家指正^^

1.校验数字（一般正则表达式实现的实际上不怎么好用，还是自己逻辑处理下，比较灵活：）

/*  *检查小数:检查用户输入的每一个字符,若不合法,不得录入  *param:field 要检查的输入域  *param:z 整数部分位数  *param:x 小数部分位数  *param:sign 是否可为负数(有此参即说明可为负数) */ //临时值:存储检查之前的数据,录入非法值时会以此值回写  var tempValue = 0; function checkFloat(field,z,x,sign){  var v = field.value;  if(sign == null){    sign = "";  }else{    if(v.charCodeAt(0)==45){//-号     v = v.substring(1);     sign = "-";    }   }  var dotCount = 0;//小数点个数  for (i=0; i<v.length; i++){       var charCode = v.charCodeAt(i);     if ((charCode>47&&charCode<58)||charCode==46) {//数字(48~57)和"."(46)      //录入小数点      if(charCode==46){       //录入项仅为整数       if(x == null || x == "" ||x==0){        field.value = tempValue;        return false;       }       //小数点仅能输入一次       dotCount ++;       if(dotCount > 1){        field.value = tempValue;        return false;       }      }     }else{      field.value = tempValue;      return false;       }     }  var pointIndex = v.indexOf('.');  if(pointIndex == -1){    if(v.length > z){     alert("整数部分不可超过"+z+"位.");     field.value = tempValue;     field.select();          return;    }  }else{    var zheng = v.substring(0,pointIndex);    var xiao = v.substring(pointIndex+1);    if(zheng.length > z||xiao.length > x){     alert("整数部分不可超过"+z+"位,/n"+           "小数部分不可超过"+x+"位.");     field.value = tempValue;     field.select();          return;    }   }  tempValue = sign + v;  return true; } /*  *控制字符数必须为某值  *param:field 要检查的输入域  *param:length 整数部分位数  *param:info 提示信息 */   function keepLength(field,length,info){    if(field.value.length != length){      if(info==null||info.length==0){       alert("请输入"+length+"字符.");      }else{       alert(info);      }     field.select();     return false;    }    return true;   } 用法示例:

邮编:<input class="common" name="postCode" maxlength="6" type="text" onKeyUp="checkFloat(this,6,0);" οnblur="checkFloat(this,6,0);keepLength(this,6);"> 示例说明:onKeyUp捕捉键盘的输入;onBlur失去焦点再校验一次

(用户一般使用键盘来输入,但万一哪个邪恶的用户仅用指标右键菜单粘贴,所以在必然发生的失去焦点时再补下...)

 

2.控制输入域字符长度

说明:html的maxlength会把汉字当成一字符,但我们一般在设计数据库采用的数据类型是以字节为单位的

/* *控制字符数必须为某值,一个汉字为两位 *param:field 要检查的输入域 *param:length 整数部分位数 *param:info 提示信息 */ function checkMaxlength(field,maxlimit){ var len = getStringLength(field.value); if (len > maxlimit){ alert("最多可输入"+maxlimit+"位."); field.value = field.value.substring(0,maxlimit); } } function getStringLength(str){ if(str==null||str.length==0){ return 0; } var strLong = 0; var browserLen = str.length; var result = 0; var charCode = 0; for (i=0; i<browserLen; i++){ charCode = str.charCodeAt(i); if (charCode > 255) { strLong += 2; }else{ strLong += 1; } } return strLong; } 用法示例:

<textarea name="remark" cols="10%" rows="8" wrap="physical" style="width:500px;font-size:9pt;border:1px solid #999999;color:#666666;" onKeyDown="checkMaxlength(this,1850);">   

3.trim

String.prototype.trim = function(){ return this.replace(/(^/s*)|(/s*$)/g, ""); }   

待补充中...^^