“偷懒”的表单验证Demo
2007-12-25 23:50
375 查看
我们在做开发时，经常要做表单验证，比如验证文本框必须填内容时，而文本框又很多时，传统的做法是逐个判断: if (form1.name.value == "") { alert("Sorry,please input your name!") form1.focus(); } 这样一来要写的代码太多了,有没有“偷懒”的方法呢，答案是肯定的，请看下面的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>“偷懒”的表单验证Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="Dicky">
<meta name="Keywords" content="Name:Dicky;QQ:25941;MSN:HaiJunGu@HotMail.Com">
<meta name="Description" content="Name:Dicky;QQ:25941;MSN:HaiJunGu@HotMail.Com">
<script language="javascript" type="text/javascript">
<!--
//剪去字符串内的所有空格
function JsTrim(str)
{
var newstr = ""
for(var jj = 0;jj < str.length;jj ++)
{
var tmpstr = str.substring(jj,jj+1);
if (tmpstr != " ")
{
newstr = newstr + tmpstr;
}
}
return newstr;
}
function CheckForm()
{
var obj = document.body.getElementsByTagName("input"); //列出所有标签为input的集合
for (var mm = 0; mm < obj.length; mm++)
{
if ((obj[mm].getAttribute("type") == "text") && (obj[mm].getAttribute("name") != "Address")) //不检查Address是否输入
{
if (JsTrim(obj[mm].value) == "")
{
window.alert(obj[mm].getAttribute("ErrorMsg")); //弹出错误提示语
obj[mm].focus();
obj[mm].select();
return false;
}
}
}
document.form1.submit();
}
//-->
</script>
</head>
<body>
<form name="form1" method="post" onsubmit="return CheckForm(this);">
<div>Name:<input type="text" name="Name" errormsg="Sorry,please input your name!" /></div>
<div>Sex :<input type="text" name="Sex" errormsg="Sorry,please input your sex!" /></div>
<div>Age :<input type="text" name="Age" errormsg="Sorry,please input your age!" /></div>
<div>Addr:<input type="text" name="Address" />
<div><input type="submit" name="Submit" value="Submit" /> <input type="reset" name="Reset" value="Reset" /></div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>“偷懒”的表单验证Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="Dicky">
<meta name="Keywords" content="Name:Dicky;QQ:25941;MSN:HaiJunGu@HotMail.Com">
<meta name="Description" content="Name:Dicky;QQ:25941;MSN:HaiJunGu@HotMail.Com">
<script language="javascript" type="text/javascript">
<!--
//剪去字符串内的所有空格
function JsTrim(str)
{
var newstr = ""
for(var jj = 0;jj < str.length;jj ++)
{
var tmpstr = str.substring(jj,jj+1);
if (tmpstr != " ")
{
newstr = newstr + tmpstr;
}
}
return newstr;
}
function CheckForm()
{
var obj = document.body.getElementsByTagName("input"); //列出所有标签为input的集合
for (var mm = 0; mm < obj.length; mm++)
{
if ((obj[mm].getAttribute("type") == "text") && (obj[mm].getAttribute("name") != "Address")) //不检查Address是否输入
{
if (JsTrim(obj[mm].value) == "")
{
window.alert(obj[mm].getAttribute("ErrorMsg")); //弹出错误提示语
obj[mm].focus();
obj[mm].select();
return false;
}
}
}
document.form1.submit();
}
//-->
</script>
</head>
<body>
<form name="form1" method="post" onsubmit="return CheckForm(this);">
<div>Name:<input type="text" name="Name" errormsg="Sorry,please input your name!" /></div>
<div>Sex :<input type="text" name="Sex" errormsg="Sorry,please input your sex!" /></div>
<div>Age :<input type="text" name="Age" errormsg="Sorry,please input your age!" /></div>
<div>Addr:<input type="text" name="Address" />
<div><input type="submit" name="Submit" value="Submit" /> <input type="reset" name="Reset" value="Reset" /></div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- “偷懒”的表单验证Demo
- “偷懒”的表单验证Demo
- “偷懒”的表单验证Demo
- “偷懒”的表单验证Demo
- “偷懒”的表单验证Demo
- 网站注册页面Demo及表单验证功能源码
- JQuery表单验证DEMO
- Angularjs表单验证demo
- 验证表单的demo
- JQuery笔记（表单验证）七 errorcontainer-demo_5.html errorElement
- JQuery表单验证DEMO -good easyvalidator方法
- JQuery笔记（表单验证）八 metadata-demo.html jquery.metadata.js
- formValidator 表单验证小demo
- Bootstrapvalidator表单验证+ 模态框 Ajax请求 Demo
- 表单验证以及获取手机验证码的小demo
- ASP.NET MVC Preview 5 演示Demo #7 实现JQuery表单数据验证及JQuery操作Html元素
- layui表单验证demo
- JQuery笔记（表单验证）四 errorcontainer-demo_2.html
- jquery 表单进行客户端验证demo