JavaScript 常用工具函数集合整理

页面布局与窗口相关

第1步：计算元素居中位置

在进行弹窗或固定尺寸元素定位时，经常需要计算水平和垂直居中的坐标值。以下函数基于文档可视区域和客户区高度计算偏移量，需注意获取滚动条位置以保证视觉居中。

/* * 水平居中left值 */
function HorCenter(x){
 return (document.documentElement.clientWidth-x)/2;
}

/* * 垂直居中top值 */
function VerCenter(y){
 return (document.documentElement.clientHeight-y)/2+document.documentElement.scrollTop;
}

第2步：判断浏览器类型（IE检测）

部分旧版代码可能需要针对Internet Explorer进行差异化处理。此函数利用 document.all 属性检测是否为IE浏览器（主要适用于IE8及以下版本）。

/* * 判断IE浏览器 */
function IsIE(number){
 if(typeof(number)!=number){
  return!!document.all;
 }
}

字符串处理函数

第3步：清除字符串两端空白字符

用户输入常包含首尾空格，使用正则表达式去除多余空白是表单预处理的标准步骤。该函数返回清理后的字符串。

/* * 删除左右两端的空格 */
function Trim(str){
 return str.replace(/(^\s*)|(\s*$)/g, "");
}

第4步：计算字节长度与截取字符串

在处理中文环境时，通常需要按“字节”而非“字符数”限制长度。英文数字占1个字节，汉字占2个字节。 GetByteVal 函数可根据指定字节上限安全截断字符串，避免编码错误。

/* * 计算字符串长度，中文记为两个，英文数字记为一个 */
function GetByteLen(sChars){
 return sChars.replace(/[^ -ÿ]/g,"xx").length;
}

/* * 限制输入的最长字符串 */
function GetByteVal(sSource, iLen){
 if(sSource.replace(/[^ -ÿ]/g,"xx").length <=iLen)
 {
  return sSource;
 }
 else
 {
  var str="";
  var l=0;
  var schar;
  for(var i=0;schar=sSource.charAt(i);i++)
  {
   str+=schar;
   l+=(schar.match(/[^ -ÿ]/) != null ? 2:1);
   if(l>=iLen)
   {
    break;
   }
  }
  return str;
 }
}

数据格式校验函数

第5步：邮箱地址验证

使用标准正则表达式校验邮箱格式，支持常见的字母、数字及符号组合。

/* * 判断邮箱，返回true/false */
function IsEmail(email){
 var Expression=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w([-.]\w+)*/;
 var objExp=new RegExp(Expression);
 return objExp.test(email);
}

第6步：用户名合法性验证

用户名通常由数字、中文、字母及下划线组成，且不能以空开头或结尾，也不能仅包含下划线。该函数确保输入符合常规命名规范。

/* * 判断用户名，返回true/false */
function IsUser(user){
 var Expression=/^(?!_)(?!.*?_$)(\w|[\u4E00-\u9FA5])*$/; //只能数字、中文、字母、下划线组合
 var objExp=new RegExp(Expression);
 return objExp.test(user);
}

第7步：手机号码验证

验证中国大陆手机号码格式，匹配以1开头，第二位为3、4、5、8之一，后续跟随9位数字的组合。

/* * 判断手机号码 */
function IsMobile(mobile){
 var Expression=/^1[3458]{1}[0-9]{9}$/;
 var objExp=new RegExp(Expression);
 return objExp.test(mobile);
}

第8步：数值与金额类型验证

包括非负整数验证、普通数字验证以及人民币金额格式验证（支持小数点后两位）。

/* * 判断非负整数，返回true/false */
function IsInt(intval){
 var Expression=/^\d+$/;
 var objExp=new RegExp(Expression);
 return objExp.test(intval);
}

/* * 判断数字，返回true/false */
function IsNum(num){
 return !isNaN(num);
}

/* * 判断人民币（钱），返回true/false */
function IsMoney(money){
 var Expression=/^(([1-9]\d+|0)\.\d{2}|([1-9]\d+|0))$/;
 var objExp=new RegExp(Expression);
 return objExp.test(money);
}

Cookies 管理函数

第9步：读取与写入 Cookie

提供基础的 SetCookie 和 GetCookie 方法。支持设置过期时间、路径、域名和安全标志。使用时请注意，escape 和 unescape 在现代浏览器中可能被标记为废弃，涉及国际化字符建议使用 encodeURIComponent 替代，但在此处保持原逻辑以维持兼容性。

/* * 写入cookie */
function SetCookie(name,value){
 var argv=SetCookie.arguments;
 var argc=SetCookie.arguments.length;
 var expires=(2<argc)?argv[2]:null;
 var path=(3<argc)?argv[3]:null;
 var domain=(4<argc)?argv[4]:null;
 var secure=(5<argc)?argv[5]:false;
 document.cookie=name+"="+escape(value)+((expires==null)?"":("; expires="+expires.toGMTString()))+((path==null)?"":("; path="+path))+((domain==null)?"":("; domain="+domain))+((secure==true)?"; secure":"");
}

/* * 获取cookie */
function GetCookie(name){
 var search = name + "=";
 var returnvalue = "";
 if (document.cookie.length > 0)
 {
  offset = document.cookie.indexOf(search);
  if (offset != -1)
  {
   offset += search.length;
   end = document.cookie.indexOf(";", offset);
   if (end == -1)
    end = document.cookie.length;
   returnvalue=unescape(document.cookie.substring(offset,end));
  }
 }
 return returnvalue;
}

表单交互辅助

第10步：复选框全选与全消

通过传入触发事件的 checkbox 对象和目标表单名，控制表单内所有指定 class 的复选框状态。需引入 jQuery 类库方可运行。

/* * checkBox全选、全消 */
function CheckAll(obj,objForm){
 if(obj.checked==true){
  $('#'+objForm+' input:checkbox.chk').each(function(){
   this.checked='checked';
  });
 }else{
  $('#'+objForm+' input:checkbox.chk').each(function(){
   this.checked='';
  });
 }
}

第11步：兼容多浏览器的文本复制

尝试调用浏览器剪贴板 API 复制指定文本。在 IE 中使用 clipboardData，其他浏览器可结合 Flash 或其他方案（此处简化为调用自定义 Copy 函数）。注意：现代浏览器出于安全考虑，大多已禁止无用户交互的剪贴板访问。

/* * 支持多种浏览器的复制 */
function CopyValue(strValue){
 if(IsIE())
 {
  clipboardData.setData("Text",strValue);
  alert("成功复制");
 }else{
  Copy(strValue); //需自行实现Copy函数或使用Clipboard API
  alert("成功复制");
 }
}