“偷懒”的表单验证Demo

转载 2006年05月27日 20:31:00
我们在做开发时,经常要做表单验证,比如验证文本框必须填内容时,而文本框又很多时,传统的做法是逐个判断: 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>

相关文章推荐

jquery 表单验证demo

前台 @{ Layout = null; } Index body { margin: 0; ...

网站注册页面Demo及表单验证功能源码

页面的构建简单地应用了bootstrap,通过js代码实现了注册表单的验证功能。代码如下: 用户注册 ...

Bootstrapvalidator表单验证+ 模态框 Ajax请求 Demo

BootStrapValidator 表单验证+ 模态框 Ajax请求 Demo BooStrapValidator网络引用地址:http://www.bootcdn.cn/bootstrap-v...

jquery表单验证demo

  • 2011年05月11日 10:02
  • 43KB
  • 下载

extjs 表单验证实例

//放在onReady的function(){}中 Ext.QuickTips.init();                       //为组件提供提示信息功能,form的主要提示信息就是客户...
  • cswhale
  • cswhale
  • 2014年01月16日 13:49
  • 1114

AngularJS 的表单验证(转)

AngularJS 的表单验证 今天我们将来看看Angular如何帮助做表单验证. 我们将讨论更多使用angular进行有关表单操作的东西(就像我们另外的一篇文章: 提交Ajax表单:Angular...

AngularJs demo 例子(表单验证) form

  • 2015年08月31日 12:48
  • 485KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:“偷懒”的表单验证Demo
举报原因:
原因补充:

(最多只允许输入30个字)