表单文本框检查javascript函数库

最新推荐文章于 2018-07-11 13:09:45 发布

hzf100

最新推荐文章于 2018-07-11 13:09:45 发布

阅读量582

点赞数

分类专栏： javascript 文章标签： javascript null url email html 测试

本文链接：https://blog.csdn.net/hzf100/article/details/1539295

版权

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

作者:罗代均，ldj_work#126.com, 转载请保持完整性

1.先看看使用的例子

先看看使用的例子，方便再往下看，以免耽误大家时间

ok, 假设有如下测试html页面

===================================================================

<html>
<title>测试</title>
<head>
<script language="javascript" src="common.js"></script>
<script language="javascript">
function checkForm(){
  if(checkField("username","用户名",10)==false
      ||checkFieldEmail("email","E-Mail")==false
      ||checkFieldDate("borthday","生日")==false
      ||checkFieldFloat("money","金额",10,2)==false){
                return false;
  }
      return true;
}
</script>
</head>
<body>
  <form οnsubmit="return checkForm()">

用户名:<input name="username" type="text" /><br/>

E-Mail:<input name="email" type="text" /><br/>

生日:<input name="borthday" type="text" /><br/>

金额:<input name="money" type="text" /><br/>

</form>
</body>
</html>

======================================================================

2，common.js函数库

/*==========================================================================================
函数功能: 检查文本框是否为空，以及是否超过字数限制
field:文本框 name 名称
fiedlDesc:文本框描述
length:最大长度
使用方法:checkField("userName","用户名",8)，用户名不能为空，并且小于8个字符
==============================================================================================*/
function checkField(field,fieldDesc,length){
var obj=document.getElementsByName(field)[0];
if(obj==null){
  return true;
}else if(obj.value.length==0){
        alert("请输入"+fieldDesc);
        obj.focus();
  return false;
    }else if(obj.value.length>length){
  alert(fieldDesc+"的长度不能超过"+length+"个字符");
  obj.focus();
  return false;
}
return true;
}

/*==========================================================================================
函数功能: 检查文本框是否为空，以及是是否满足整数部分及小数部分长度限制
field:文本框 name 名称
fiedlDesc:文本框描述
lengthZ:整数部分最大长度
lengthF:小数部分最大长度
使用方法如下:checkFieldFloat("money","金额",8,2)
==============================================================================================*/
function checkFieldFloat(field,fieldDesc,lengthZ,lengthF){
var obj=document.getElementsByName(field)[0];
if(obj==null){
  return true;
}else if(obj.value.length==0){
        alert("请输入"+fieldDesc);
        obj.focus();
  return false;
    }else if(obj.value.indexOf(".")==-1){
        if(obj.value.length>lengthZ){
            alert(fieldDesc+"整数部分不得超过"+lengthZ+"位");
      obj.focus();
      return false;
        }else if(!/^(/d{1,10})$/.test(obj.value)){
  alert(fieldDesc+"请输入数字.");
  obj.focus();
  return false;
}

    }else if(!/^(/d{1,10})(/./d{1,2})$/.test(obj.value)){
  alert(fieldDesc+"整数部分不得超过"+lengthZ+"位，小数部分不得超过"+lengthF+"位");
  obj.focus();
  return false;
}
return true;
}

/*==============================================================================================
函数功能：是否日期，如2006-12-05
field:文本框 name 名称
field:文本框描述
使用方法: checkFieldDate("inDate","申请时间")
===============================================================================================*/
function checkFieldDate(field,fieldDesc){
var obj=document.getElementsByName(field)[0];
if(obj==null){
  return true;
}

if(obj.value.length==0){
        alert("请输入"+fieldDesc);
        obj.focus();
  return false;
    }
    var r = obj.value.match(/^(/d{1,4})(-|//)(/d{1,2})/2(/d{1,2})$/);
if(r==null){
  alert(fieldDesc+"格式不正确,正确格式为:2006-12-05");
  obj.focus();
  return false;
}
var falg=false;
    var d= new Date(r[1], r[3]-1, r[4]);
    flag = d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4];
if(!flag){
  alert(fieldDesc+"格式不正确,正确格式为:2006-12-05");
  obj.focus();
}
return flag;
}

//是否日期时间，如2006-12-05 17:45:03
function checkFieldDateTime(field,fieldDesc){
var obj=document.getElementsByName(field)[0];
if(obj==null){
  return true;
}
if(obj.value.length==0){
        alert("请输入"+fieldDesc);
        obj.focus();
  return false;
    }
    var reg = /^(/d{1,4})(-|//)(/d{1,2})/2(/d{1,2}) (/d{1,2}):(/d{1,2}):(/d{1,2})$/;
    var r = obj.value.match(reg);
if(r==null){
  alert(fieldDesc+"格式不正确,正确格式为:2006-12-05 08:10:05");
  obj.focus();
  return false;
}
var flag=false;
    var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
    flag = d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()== r[7];
if(!flag){
  alert("日期格式不正确,正确格式为:2006-12-05 08:10:05");
  obj.focus();
}
return flag;
}

/*==============================================================================================
函数功能：是否Email
field:文本框 name 名称
===============================================================================================*/
function checkFieldEmail(field,fieldDesc){
var obj=document.getElementsByName(field)[0];
if(obj==null){
  return true;
}
if(obj.value.length==0){
        alert("请输入"+fieldDesc);
        obj.focus();
  return false;
    }
    if(!new RegExp(/^/w+((-/w+)|(/./w+))*/@[A-Za-z0-9]+((/.|-)[A-Za-z0-9]+)*/.[A-Za-z0-9]+$/).test(obj.value)){
  alert(fieldDesc+"格式不正确.");
  obj.focus();
  return false;
}
    return true;
}

/*==============================================================================================
函数功能：checkBox全选/全不选
fieldName:checkBox 名称 name
使用方法:  checkbox: <input  type="checkbox"  name="empid"/>
checkAll('empid')
===============================================================================================*/
function checkAll(fieldName) {
  var a = document.getElementsByName(fieldName);
  var n = a.length;
  for (var i=0; i<n; i++){
a[i].checked = !a[i].checked;
  }
}

//关闭窗口
function closeWindow(){
var ua = navigator.userAgent;
var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
if(ie){
  var IEversion = parseFloat(ua.substring(ua.indexOf("MSIE ")+5,ua.indexOf(";",ua.indexOf("MSIE "))));
  if( IEversion< 5.5){
   var str = '';
   document.body.insertAdjacentHTML("beforeEnd", str);
   document.all.noTipClose.Click();
  } else {
   window.opener =null; window.close();
  }
}else{
  window.close()
}
}

/*=================================================================================================
函数功能:弹出居中窗口
url: 弹出窗口url地址
width:弹出窗口宽度
height:弹出窗口高度
isModal:是否模态窗口,true:模态
使用方法: showDialog('aaa.htm',300,400,false)
==================================================================================================*/
function showDialog(url,iHeight,iWidth,isModal){
var iTop=(window.screen.height-iHeight)/2;
var iLeft=(window.screen.width-iWidth)/2;
if(isModal){
window.showModalDialog(url,window,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px; dialogTop: "+iTop+";dialogLeft: "+iLeft+"; resizable: no; status: no;scroll:no");
}else{
window.open(url,"","Scrollbars=no,Toolbar=no,Location=no,Direction=no,Resizeable=no, Width="+iWidth+",Height="+iHeight+",top="+iTop+",left="+iLeft);
}
}