实例：表单的验证
<script>
//定义函数：当用户名获得焦时，显示的提交信息
function focus_username()
{
//当获得焦点时，显示一个提示信息
var result = document.getElementById("result_username");
var str = "<font color=gray>请输入你的用户名</font>";
result.innerHTML = str;
}
//定义函数：失去焦点时，做一个验证，并显示验证信息
function blur_username()
{
//取到name=form1的对象
var theForm = document.form1;
//取到id=result_username的对象
var result = document.getElementById("result_username");
//验证判断
if(theForm.username.value.length==0)
{
result.innerHTML = "<font color=red>用户名不能为空</font>";
//返回值给checkForm()函数来用
return false;
}else if(theForm.username.value.length<5 || theForm.username.value.length>15)
{
result.innerHTML = "<font color=red>用户名长度介于5-15之间</font>";
return false;
}else
{
result.innerHTML = "<font color=blue>用户名合法</font>";
return true;
}
}
//定义函数：密码获得焦时，显示的提交信息
function focus_password()
{
//当获得焦点时，显示一个提示信息
var result = document.getElementById("result_password");
var str = "<font color=gray>请输入你的密码</font>";
result.innerHTML = str;
}
//定义函数：失去焦点时，做一个验证，并显示验证信息
function blur_password()
{
//取到name=form1的对象
var theForm = document.form1;
//取到id=result_username的对象
var result = document.getElementById("result_password");
//验证判断
if(theForm.password.value.length==0)
{
result.innerHTML = "<font color=red>密码不能为空</font>";
//返回值给checkForm()函数来用
return false;
}else if(theForm.password.value.length<5 || theForm.password.value.length>15)
{
result.innerHTML = "<font color=red>密码长度介于5-15之间</font>";
return false;
}else
{
result.innerHTML = "<font color=blue>密码合法</font>";
return true;
}
}
//定义函数：表单验证
function checkForm()
{
//分别调用每个单项的验证函数，将函数的返回值，赋给一个变量
var flagUsername = blur_username(); //调用用户名验证函数
var flagPassword = blur_password(); //调用密码验证函数
//判断所有的返回值
if(flagUsername && flagPassword)
{
//如果表单中所有选项，全部为true，则可以提交表单
window.alert("表单验证通过");
return true;
}else
{ //如果表单中某个项，为false，则阻止表单的提交
window.alert("表单验证失败");
return false;
}
}
</script>
</head>
<body>
<form name="form1" action="login.php" method="get" onsubmit="return checkForm()">
<table width="500" border="0" align="center">
<tr>
<td align="right" width="80">用户名：</td>
<td width="150"><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" /></td>
<td><span id="result_username"></span></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" name="password" onfocus="focus_password()" onblur="blur_password()" /></td>
<td><span id="result_password"></span></td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<input type="submit" value="提交表单" />
</td>
</tr>
</table>
</form>
表单提交验证的几种方法
一、submit按钮和onsubmit事件实现验证
<form name=“form1”onsubmit=“return checkForm()”>
用户名：<input type=“text”name=“username” />
<input type=“submit” value=“提交表单” />
</form>
二、button按钮和onclick事件实现验证
<form name=“form1” >
用户名：<input type=“text”name=“username” />
<input type=“button” value=“提交表单”onClick=“checkForm()” />
注意：普通按钮的onclick的返回值，不会阻止普通按钮的默认动作
</form>
<script>
function checkForm()
{
var flag; //局部变量
//先做表单验证
If(document.form1.username.value==””)
{
flag = false;
}else
{
flag = true;
}
//判断flag的值，如果为true，则提交表单
if(flag==true)
{
//如果为true，则提交表单，使用form对象的提交方法submit()
Window.alert(“表单验证通过”);
document.form1.submit();
}else
{
//如果为false，则弹出一个提示信息
Window.alert(“表单验证失败”);
}
}
</script>
三、submit按钮和onclick事件实现验证
<form name=“form1” >
用户名：<input type=“text”name=“username” />
<input type=“submit” value=“提交表单”onClick=“return checkForm()” />
</form>
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/464.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
