提交和验证方法总结
提交和验证方法总结
1、使用submit按钮，结合onsubmit事件来实现(最常用)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php.cn</title>
<script type="text/javascript">
function checkForm()
{
//判断用户名是否为空
if(document.form1.username.value=="")
{
window.alert("用户名不能为空！");
return false;
}else
{
window.alert("验证通过！");
return true;
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php" onsubmit="return checkForm()">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="submit" value="提交表单" />
</form>
</body>
</html>2、submit按钮，结合onclick事件，实现表单的验证和提交
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php.cn</title>
<script type="text/javascript">
function checkForm()
{
//判断用户名是否为空
if(document.form1.username.value=="")
{
window.alert("用户名不能为空！");
}else
{
window.alert("验证通过！");
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="submit" value="提交表单" onclick="checkForm()" />
</form>
</body>
</html>3、button按钮(普通按钮)，结合submit()方法，实现表单验证提交
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php.cn</title>
<script type="text/javascript">
function checkForm()
{
if(document.form1.username.value.length == 0)
{
//如果用户名为空
window.alert("用户名不能为空！");
}else if(document.form1.username.value.length<5 || document.form1.username.value.length>20)
{
//如果用户名长度小于5或大于20
window.alert("用户名只能介于5-20个字符！");
}else if(checkOtherChar(document.form1.username.value))
{
//如果用户名含有特殊符号
window.alert("用户名中含有特殊符号！");
}else
{
//如果验证通过，提交表单
window.alert("验证通过！");
//表单提交方法
document.form1.submit();
}
}
function checkOtherChar(str)
{
//定义一个特殊符号的数组
var arr = ["*","&","<",">","$","\","/"];
//循环比较：数组中的每一个字符，与用户名每一个字符进行比对
for(var i=0;i<arr.length;i++)
{
for(var j=0;j<str.length;j++)
{
if(arr[i]==str.charAt(j))
{
return true;
}
}
}
//如果没找到
return false;
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="button" value="提交按钮" onclick="checkForm()" />
</form>
</body>
</html>
