动态增删改Table表格
一、用js做的表格动态增删查改
工具JavaScript:util.js
- //全选反选
- function checkAll(boxName) {
- var checkBox = document.getElementsByName(boxName);
- for (i = 0; i < checkBox.length; i++) {
- var checked = checkBox[i].checked;
- if (checked) {
- checkBox[i].checked = false;
- } else {
- checkBox[i].checked = true;
- }
- }
- }
- //多选验证
- function multiCheck(idArray)
- {
- //var idArray = document.getElementsByName(boxName);
- var count = 0;
- for(i=0;i<idArray.length;i++)
- {
- if(idArray[i].checked)
- {
- count++;
- }
- }
- return count;
- }
- //回车切换焦点
- function toNext(next)
- {
- if(event.keyCode==13)
- {
- next.focus();
- }
- }
- //打开右键菜单
- function openShortCutMenu(oRow)
- {
- // 选中当前行
- SelectRow(oRow);
- aOpenPopMenu("ShortCutMenu");
- event.cancelBubble = true;
- event.returnValue = false;
- }
- //关闭右键菜单
- function CloseShortCutMenu(){
- aClosePopMenu("ShortCutMenu");
- }
- //显示右键菜单
- function aOpenPopMenu(MenuId){
- if (document.all(MenuId)){
- document.all(MenuId).style.left = event.clientX + document.body.scrollLeft;
- document.all(MenuId).style.top = event.clientY + document.body.scrollTop;
- document.all(MenuId).style.display = "";
- }
- }
- //隐藏右键菜单
- function aClosePopMenu(MenuId){
- if (document.all(MenuId)){
- document.all(MenuId).style.display = "none";
- }
- }
//全选反选 function checkAll(boxName) { var checkBox = document.getElementsByName(boxName); for (i = 0; i < checkBox.length; i++) { var checked = checkBox[i].checked; if (checked) { checkBox[i].checked = false; } else { checkBox[i].checked = true; } } } //多选验证 function multiCheck(idArray) { //var idArray = document.getElementsByName(boxName); var count = 0; for(i=0;i<idArray.length;i++) { if(idArray[i].checked) { count++; } } return count; } //回车切换焦点 function toNext(next) { if(event.keyCode==13) { next.focus(); } } //打开右键菜单 function openShortCutMenu(oRow) { // 选中当前行 SelectRow(oRow); aOpenPopMenu("ShortCutMenu"); event.cancelBubble = true; event.returnValue = false; } //关闭右键菜单 function CloseShortCutMenu(){ aClosePopMenu("ShortCutMenu"); } //显示右键菜单 function aOpenPopMenu(MenuId){ if (document.all(MenuId)){ document.all(MenuId).style.left = event.clientX + document.body.scrollLeft; document.all(MenuId).style.top = event.clientY + document.body.scrollTop; document.all(MenuId).style.display = ""; } } //隐藏右键菜单 function aClosePopMenu(MenuId){ if (document.all(MenuId)){ document.all(MenuId).style.display = "none"; } }
学生信息管理主页studentInfo.html
- <html>
- <head>
- <title>学生信息</title>
- <script type="text/javascript" src="util.js"></script>
- <script>
- //显示更新学生信息模态窗体
- function showDialog()
- {
- var result = window.showModalDialog("dialog.html",null,"dialogWidth=400px;dialogHeight=400px;");
- if(result&&result.length!=0&&result[0]!="")
- {
- addRow(result);
- }
- }
- //添加一行学生信息
- function addRow(result)
- {
- var doc = window.listFrame.document;//内嵌框架的document对象
- var tb = doc.getElementById("stuTable");//学生信息表格
- var tbody = doc.getElementById("mytbody");
- //创建新的行
- var tr = doc.createElement("<tr onClick='SelectRow(this)' ondblclick='update();' oncontextmenu='openShortCutMenu(this)' title='右键修改'>");
- //创建行的第一个单元格中的多选框
- var check = document.createElement("<input name='idArray' type='checkbox'>");
- var td = document.createElement("td");
- td.appendChild(check);
- tr.appendChild(td);
- //将模式窗体传过来的值添加到新行中
- for(i=0;i<result.length;i++)
- {
- var td = document.createElement("td");
- td.appendChild(document.createTextNode(result[i]));
- tr.appendChild(td);
- }
- tbody.appendChild(tr);
- }
- //删除学生信息
- function delStudent()
- {
- var checks = window.listFrame.document.getElementsByName("idArray");
- var count = multiCheck(checks);
- if(count==0) {alert("未选中任何选项!"); return;}
- if(window.confirm("确定要删除这"+count+"条信息吗?"))
- {
- while(count>0)
- {
- var tb = window.listFrame.document.getElementById("stuTable");
- var checks = window.listFrame.document.getElementsByName("idArray");
- for(i=0;i<checks.length;i++)
- {
- if(checks[i].checked)
- {
- tb.deleteRow(checks[i].parentElement.parentElement.rowIndex);
- count--;
- break;
- }
- }
- }
- }
- }
- //修改学生信息
- function update()
- {
- var CurrRow = window.listFrame.CurrRow;
- if(CurrRow&&CurrRow.cells.length>0)
- {
- var values = new Array();
- for(i=0;i<CurrRow.cells.length-1;i++)
- {
- values[i] = CurrRow.cells[i+1].innerText;
- }
- values[values.length] = CurrRow;//将修改的当前行传给模式窗体进行修改
- var result = window.showModalDialog("dialog.html",values,"dialogWidth=400px;dialogHeight=400px;");
- }else
- {
- alert("请选中要修改的行");
- }
- }
- </script>
- </head>
- <body bgcolor="#FFFFFF" text="#000000" onselectstart="return false;">
- <table border="0" cellpadding="0" cellspacing="0" width="100%"
- height="95%">
- <tr>
- <td width="100%" height="100%" valign="top">
- <IFRAME width="100%" id="listFrame" height="100%" border=0
- frameBorder=1 name="listFrame" src="list.html"></IFRAME>
- </td>
- </tr>
- <tr>
- <td width="100%" align="center" colspan="2">
- <input class="btn_70" type="button" value="刷 新" id="btRefresh"
- onclick="listFrame.location.reload();">
-   
- <input class="btn_70" type="button" value="删 除" id="btDel"
- onclick="delStudent();">
-   
- <input class="btn_70" type="button" value="添 加" id="btAdd"
- onclick="showDialog();">
-   
- <input type="button" Class="btn_70" value="修 改" name="btModify"
- onclick="update();">
-   
- </td>
- </tr>
- </table>
- </body>
- </html>
<html>
<head>
<title>学生信息</title>
<script type="text/javascript" src="util.js"></script>
<script>
//显示更新学生信息模态窗体
function showDialog()
{
var result = window.showModalDialog("dialog.html",null,"dialogWidth=400px;dialogHeight=400px;");
if(result&&result.length!=0&&result[0]!="")
{
addRow(result);
}
}
//添加一行学生信息
function addRow(result)
{
var doc = window.listFrame.document;//内嵌框架的document对象
var tb = doc.getElementById("stuTable");//学生信息表格
var tbody = doc.getElementById("mytbody");
//创建新的行
var tr = doc.createElement("<tr onClick='SelectRow(this)' οndblclick='update();' οncοntextmenu='openShortCutMenu(this)' title='右键修改'>");
//创建行的第一个单元格中的多选框
var check = document.createElement("<input name='idArray' type='checkbox'>");
var td = document.createElement("td");
td.appendChild(check);
tr.appendChild(td);
//将模式窗体传过来的值添加到新行中
for(i=0;i<result.length;i++)
{
var td = document.createElement("td");
td.appendChild(document.createTextNode(result[i]));
tr.appendChild(td);
}
tbody.appendChild(tr);
}
//删除学生信息
function delStudent()
{
var checks = window.listFrame.document.getElementsByName("idArray");
var count = multiCheck(checks);
if(count==0) {alert("未选中任何选项!"); return;}
if(window.confirm("确定要删除这"+count+"条信息吗?"))
{
while(count>0)
{
var tb = window.listFrame.document.getElementById("stuTable");
var checks = window.listFrame.document.getElementsByName("idArray");
for(i=0;i<checks.length;i++)
{
if(checks[i].checked)
{
tb.deleteRow(checks[i].parentElement.parentElement.rowIndex);
count--;
break;
}
}
}
}
}
//修改学生信息
function update()
{
var CurrRow = window.listFrame.CurrRow;
if(CurrRow&&CurrRow.cells.length>0)
{
var values = new Array();
for(i=0;i<CurrRow.cells.length-1;i++)
{
values[i] = CurrRow.cells[i+1].innerText;
}
values[values.length] = CurrRow;//将修改的当前行传给模式窗体进行修改
var result = window.showModalDialog("dialog.html",values,"dialogWidth=400px;dialogHeight=400px;");
}else
{
alert("请选中要修改的行");
}
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onselectstart="return false;">
<table border="0" cellpadding="0" cellspacing="0" width="100%"
height="95%">
<tr>
<td width="100%" height="100%" valign="top">
<IFRAME width="100%" id="listFrame" height="100%" border=0
frameBorder=1 name="listFrame" src="list.html"></IFRAME>
</td>
</tr>
<tr>
<td width="100%" align="center" colspan="2">
<input class="btn_70" type="button" value="刷 新" id="btRefresh"
οnclick="listFrame.location.reload();">
  
<input class="btn_70" type="button" value="删 除" id="btDel"
οnclick="delStudent();">
  
<input class="btn_70" type="button" value="添 加" id="btAdd"
οnclick="showDialog();">
  
<input type="button" Class="btn_70" value="修 改" name="btModify"
οnclick="update();">
  
</td>
</tr>
</table>
</body>
</html>
学生信息列表页面(list.html),此页面内嵌在studentInfo.html中
- <html>
- <head>
- <title>学生信息列表</title>
- <script type="text/javascript" src="util.js"></script>
- <script>
- // 当前行对象变量
- var CurrRow = null;
- // 选定表格行函数
- function SelectRow(row)
- {
- // 如果有曾选定过的行, 则恢复此行为未选定状态
- if(CurrRow)
- {
- CurrRow.style.backgroundColor="";
- }
- // 设置新的选定行的状态
- row.style.backgroundColor = '#D9F5FF';
- // 前新的行赋给 当前行变量
- CurrRow = row;
- }
- //更新学生信息
- function update()
- {
- var values = new Array();
- for(i=0;i<CurrRow.cells.length-1;i++)
- {
- values[i] = CurrRow.cells[i+1].innerText;
- }
- values[values.length] = CurrRow;//将修改的当前行传给模式窗体进行修改
- var result = window.showModalDialog("dialog.html",values,"dialogWidth=400px;dialogHeight=400px;");
- }
- </script>
- </head>
- <body onmousedown="CloseShortCutMenu()">
- <table border="1" width="100%" bordercolor="#666666" cellspacing="0" id="stuTable"
- style="border-collapse: collapse" cellpadding="2" align="center">
- <caption>07级学生信息列表</caption>
- <tbody id="mytbody">
- <tr class="th">
- <td><input type="checkbox" onclick="checkAll('idArray');">[全选/反选]</td>
- <td>学号</td>
- <td>姓名</td>
- <td>性别</td>
- <td>年龄</td>
- <td>学校</td>
- <td>手机</td>
- </tr>
- <tr onClick="SelectRow(this)" ondblclick="update();" oncontextmenu="openShortCutMenu(this)" title="右键修改">
- <td><input name="idArray" type="checkbox"></td>
- <td>430901</td>
- <td>hackiller</td>
- <td>男</td>
- <td>21</td>
- <td>中南林业科技大学涉外学院</td>
- <td>12345678901</td>
- </tr>
- </tbody>
- </table>
- <div id="ShortCutMenu" style="position: absolute; left: -200px; top: -200px; width: 120px; z-index: 999; display: none">
- <table border="0" width="120" style="border-collapse: collapse; border: 2 outset #AEA67C" cellspacing="0" cellpadding="4" bgcolor="#EBF5FF">
- <tr style="cursor: default" onmouseover="this.bgColor='#ADCFFF'" onmouseout="this.bgColor=''" onmousedown="update();">
- <td width="90">修改</td>
- </tr>
- </table>
- </div>
- </body>
- </html>
<html>
<head>
<title>学生信息列表</title>
<script type="text/javascript" src="util.js"></script>
<script>
// 当前行对象变量
var CurrRow = null;
// 选定表格行函数
function SelectRow(row)
{
// 如果有曾选定过的行, 则恢复此行为未选定状态
if(CurrRow)
{
CurrRow.style.backgroundColor="";
}
// 设置新的选定行的状态
row.style.backgroundColor = '#D9F5FF';
// 前新的行赋给 当前行变量
CurrRow = row;
}
//更新学生信息
function update()
{
var values = new Array();
for(i=0;i<CurrRow.cells.length-1;i++)
{
values[i] = CurrRow.cells[i+1].innerText;
}
values[values.length] = CurrRow;//将修改的当前行传给模式窗体进行修改
var result = window.showModalDialog("dialog.html",values,"dialogWidth=400px;dialogHeight=400px;");
}
</script>
</head>
<body οnmοusedοwn="CloseShortCutMenu()">
<table border="1" width="100%" bordercolor="#666666" cellspacing="0" id="stuTable"
style="border-collapse: collapse" cellpadding="2" align="center">
<caption>07级学生信息列表</caption>
<tbody id="mytbody">
<tr class="th">
<td><input type="checkbox" οnclick="checkAll('idArray');">[全选/反选]</td>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>学校</td>
<td>手机</td>
</tr>
<tr onClick="SelectRow(this)" οndblclick="update();" οncοntextmenu="openShortCutMenu(this)" title="右键修改">
<td><input name="idArray" type="checkbox"></td>
<td>430901</td>
<td>hackiller</td>
<td>男</td>
<td>21</td>
<td>中南林业科技大学涉外学院</td>
<td>12345678901</td>
</tr>
</tbody>
</table>
<div id="ShortCutMenu" style="position: absolute; left: -200px; top: -200px; width: 120px; z-index: 999; display: none">
<table border="0" width="120" style="border-collapse: collapse; border: 2 outset #AEA67C" cellspacing="0" cellpadding="4" bgcolor="#EBF5FF">
<tr style="cursor: default" οnmοuseοver="this.bgColor='#ADCFFF'" οnmοuseοut="this.bgColor=''" οnmοusedοwn="update();">
<td width="90">修改</td>
</tr>
</table>
</div>
</body>
</html>
更新学生信息对话框页面(dialog.html),用于添加和修改表格
- <html>
- <head>
- <title>更新学生信息</title>
- <script type="text/javascript" src="util.js"></script>
- <script>
- var arg = window.dialogArguments;
- function updateInfo()
- {
- var stuValues = getStuValues();
- if(!arg)
- {
- window.returnValue = stuValues;
- }else
- {
- for(i=0;i<stuValues.length;i++)
- {
- arg[arg.length-1].cells[i+1].innerText=stuValues[i];
- }
- }
- window.close();
- }
- //取消更新
- function cancle()
- {
- window.close();
- }
- //初始化
- function init()
- {
- if(arg)
- {
- setStuValues(arg);
- }
- }
- //获取学生信息
- function getStuValues()
- {
- var tb = document.getElementById("stuInfoTb");
- var stuValues = new Array(6);
- for(i=0;i<6;i++)
- {
- //获取表格中每一行第2个单元格中的元素的值,即学生信息
- stuValues[i] = tb.rows[i].cells[1].children[0].value;
- }
- var female = tb.rows[2].cells[1].children[1];
- if(female.checked) stuValues[2]='女';
- else stuValues[2]='男';
- return stuValues;
- }
- //设置学生信息初始值
- function setStuValues(stuValues)
- {
- var tb = document.getElementById("stuInfoTb");
- for(i=0;i<6;i++)
- {
- //获取表格中每一行第2个单元格中的元素的值,即学生信息
- var elem = tb.rows[i].cells[1].children[0];
- elem.value = stuValues[i];
- }
- var female = tb.rows[2].cells[1].children[1];
- if(stuValues[2]=='女') female.checked=true;
- }
- </script>
- </head>
- <body>
- <table align="center" style="margin-top: 10%;" id="stuInfoTb">
- <tr>
- <td>学号</td>
- <td><input type="text" id="stuID" name="stuID" onkeypress="toNext(stuName);"></td>
- </tr>
- <tr>
- <td>姓名</td>
- <td><input type="text" id="stuName" name="stuName" maxlength="20" onkeypress="toNext(stuAge);"></td>
- </tr>
- <tr>
- <td>性别</td>
- <td>
- <input type="radio" id="male" name="stuSex" value="男" checked="checked">男
-
- <input type="radio" id="female" name="stuSex" value="女">女
- </td>
- </tr>
- <tr>
- <td>年龄</td>
- <td><input type="text" id="stuAge" name="stuAge" maxlength="2"
- onkeypress="toNext(stuSchool);" onkeyup="this.value=this.value.replace(/\D/g,'');">
- </td>
- </tr>
- <tr>
- <td>学校</td>
- <td><input type="text" id="stuSchool" name="stuSchool" maxlength="50" onkeypress="toNext(stuMobile);"></td>
- </tr>
- <tr>
- <td>手机</td>
- <td><input type="text" id="stuMobile" name="stuMobile" maxlength="50" onkeypress="if(event.keyCode==13) updateInfo();"></td>
- </tr>
- <tr align="center"><td colspan="2">
- <input type="button" class="btn_70" value="确定" onclick="updateInfo();">
-
- <input type="button" class="btn_70" value="取消" onclick="cancle();">
- </td></tr>
- </table>
- <script>init();</script>
- </body>
- </html>
<html>
<head>
<title>更新学生信息</title>
<script type="text/javascript" src="util.js"></script>
<script>
var arg = window.dialogArguments;
function updateInfo()
{
var stuValues = getStuValues();
if(!arg)
{
window.returnValue = stuValues;
}else
{
for(i=0;i<stuValues.length;i++)
{
arg[arg.length-1].cells[i+1].innerText=stuValues[i];
}
}
window.close();
}
//取消更新
function cancle()
{
window.close();
}
//初始化
function init()
{
if(arg)
{
setStuValues(arg);
}
}
//获取学生信息
function getStuValues()
{
var tb = document.getElementById("stuInfoTb");
var stuValues = new Array(6);
for(i=0;i<6;i++)
{
//获取表格中每一行第2个单元格中的元素的值,即学生信息
stuValues[i] = tb.rows[i].cells[1].children[0].value;
}
var female = tb.rows[2].cells[1].children[1];
if(female.checked) stuValues[2]='女';
else stuValues[2]='男';
return stuValues;
}
//设置学生信息初始值
function setStuValues(stuValues)
{
var tb = document.getElementById("stuInfoTb");
for(i=0;i<6;i++)
{
//获取表格中每一行第2个单元格中的元素的值,即学生信息
var elem = tb.rows[i].cells[1].children[0];
elem.value = stuValues[i];
}
var female = tb.rows[2].cells[1].children[1];
if(stuValues[2]=='女') female.checked=true;
}
</script>
</head>
<body>
<table align="center" style="margin-top: 10%;" id="stuInfoTb">
<tr>
<td>学号</td>
<td><input type="text" id="stuID" name="stuID" οnkeypress="toNext(stuName);"></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" id="stuName" name="stuName" maxlength="20" οnkeypress="toNext(stuAge);"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" id="male" name="stuSex" value="男" checked="checked">男
<input type="radio" id="female" name="stuSex" value="女">女
</td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" id="stuAge" name="stuAge" maxlength="2"
οnkeypress="toNext(stuSchool);" οnkeyup="this.value=this.value.replace(/\D/g,'');">
</td>
</tr>
<tr>
<td>学校</td>
<td><input type="text" id="stuSchool" name="stuSchool" maxlength="50" οnkeypress="toNext(stuMobile);"></td>
</tr>
<tr>
<td>手机</td>
<td><input type="text" id="stuMobile" name="stuMobile" maxlength="50" οnkeypress="if(event.keyCode==13) updateInfo();"></td>
</tr>
<tr align="center"><td colspan="2">
<input type="button" class="btn_70" value="确定" οnclick="updateInfo();">
<input type="button" class="btn_70" value="取消" οnclick="cancle();">
</td></tr>
</table>
<script>init();</script>
</body>
</html>
二、在学习和做项目过程中写的JavaScript验证函数(正则表达式)
- //身份证合法性
- function isIdentity(new_num)
- {
- var num = new_num;
- var len = num.length ;
- var re ;
- if (len == 15)
- {
- if (isNaN(num)) {alert("输入的不是数字!"); return false;}
- }
- if (len == 15)
- re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);
- else if (len == 18)
- re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d|[X])$/);
- else { alert("输入的数字位数不对!"); return false;}
- var a = num.match(re);
- if (a != null)
- {
- if (len==15)
- {
- var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
- var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
- }
- else
- {
- var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
- var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
- }
- if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对!"); return false;}
- }else
- {
- alert("输入的身份证号不对!");
- return false;
- }
- return true;
- }
- //电子邮箱的合法性
- function checkemail(email)
- {
- var myReg = /^([-_A-Za-z0-9\.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
- if(!myReg.test( email ))
- {
- alert("请输入合法的电子邮件地址");
- return false;
- }
- return true;
- }
- //验证邮政编码
- function checkPostcode(postcode)
- {
- var reobj = new RegExp(/^\d+$/);
- if(!reobj.test(postcode)||!postcode.length!=6)
- {
- alert("请输入正确的邮政编码");
- return false;
- }
- return true;
- }
- //价格验证
- function checkPrice(price)
- {
- var float = /^\d+(.){0,1}?\d{0,2}$/;//两位小数
- var int = /^[1-9]\d*$/;//正整数
- if(!float.test(price)&&!int.test(price))
- {
- alert("请输入正确的商品价格");
- return false;
- }
- return true;
- }
- //验证上传图片类型
- function valiImgType(fileName)
- {
- var extension = fileName.substring(fileName.lastIndexOf(".")+1,fileName.length).toLowerCase();
- if(extension!="jpg"&&extension!="gif")
- {
- alert("请选择jpg或gif格式的图片");
- return false;
- }
- return true;
- }
- //验证是否为中文
- function iszhCN(name)
- {
- var Expression=/[^\u4E00-\u9FA5]/;
- var objExp=new RegExp(Expression);
- if(!/^[\u4e00-\u9fa5]+$/.test(name))
- {
- alert("请输入汉字,验证未通过");
- return false;
- }
- return true;
- }
- //验证IP地址
- function checkIP(sIPAddress)
- {
- var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
- var reg = sIPAddress.match(exp);
- var ErrMsg="你输入的是一个非法的IP地址段!\nIP段为::xxx.xxx.xxx.xxx(xxx为0-255)!"
- if(reg==null)
- {
- alert(ErrMsg);
- return false;
- }
- return true;
- }
//身份证合法性 function isIdentity(new_num) { var num = new_num; var len = num.length ; var re ; if (len == 15) { if (isNaN(num)) {alert("输入的不是数字!"); return false;} } if (len == 15) re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/); else if (len == 18) re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d|[X])$/); else { alert("输入的数字位数不对!"); return false;} var a = num.match(re); if (a != null) { if (len==15) { var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]); var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; } else { var D = new Date(a[3]+"/"+a[4]+"/"+a[5]); var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; } if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对!"); return false;} }else { alert("输入的身份证号不对!"); return false; } return true; } //电子邮箱的合法性 function checkemail(email) { var myReg = /^([-_A-Za-z0-9\.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/; if(!myReg.test( email )) { alert("请输入合法的电子邮件地址"); return false; } return true; } //验证邮政编码 function checkPostcode(postcode) { var reobj = new RegExp(/^\d+$/); if(!reobj.test(postcode)||!postcode.length!=6) { alert("请输入正确的邮政编码"); return false; } return true; } //价格验证 function checkPrice(price) { var float = /^\d+(.){0,1}?\d{0,2}$/;//两位小数 var int = /^[1-9]\d*$/;//正整数 if(!float.test(price)&&!int.test(price)) { alert("请输入正确的商品价格"); return false; } return true; } //验证上传图片类型 function valiImgType(fileName) { var extension = fileName.substring(fileName.lastIndexOf(".")+1,fileName.length).toLowerCase(); if(extension!="jpg"&&extension!="gif") { alert("请选择jpg或gif格式的图片"); return false; } return true; } //验证是否为中文 function iszhCN(name) { var Expression=/[^\u4E00-\u9FA5]/; var objExp=new RegExp(Expression); if(!/^[\u4e00-\u9fa5]+$/.test(name)) { alert("请输入汉字,验证未通过"); return false; } return true; } //验证IP地址 function checkIP(sIPAddress) { var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/; var reg = sIPAddress.match(exp); var ErrMsg="你输入的是一个非法的IP地址段!\nIP段为::xxx.xxx.xxx.xxx(xxx为0-255)!" if(reg==null) { alert(ErrMsg); return false; } return true; }
三、在学习和做项目过程中写的常用JavaScript函数
- //四舍五入,保留valiNumber个小数;
- function round(number,valiNumber)
- {
- document.write(number.toFixed(valiNumber));
- }
- // 判断字符串长度,一个中文按两个字符算
- function strlen(str)
- {
- var len;
- var i;
- len = 0;
- for (i=0;i<str.length;i++)
- {
- if (str.charCodeAt(i)>255) len+=2; else len++;
- }
- return len;
- }
//四舍五入,保留valiNumber个小数; function round(number,valiNumber) { document.write(number.toFixed(valiNumber)); } // 判断字符串长度,一个中文按两个字符算 function strlen(str) { var len; var i; len = 0; for (i=0;i<str.length;i++) { if (str.charCodeAt(i)>255) len+=2; else len++; } return len; }
四、用JavaScript限制html输入框为整数
- <!-- 第一种 -->
- <input onkeypress="return event.keyCode>=48&&event.keyCode<=57"
- onpaste="var s=clipboardData.getData('text'); if(!/\D/.test(s)) value=s.replace(/^0*/,'');return false;"
- onkeyup="if(/(^0+)/.test(value))value=value.replace(/^0*/, '')" />
- <!-- 第二种 -->
- <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'');">