html表单验证 和 JavaScript

<!--check.html-->

<html>
<head>
<title>注册验证</title>
<script language="JavaScript">
<!--
function namecheckdata()
{
var name=document.myform.name,i,length=myform.name.value.length;
if(name.value=='')
{
alert("用户名不能为空");
name.focus();
}
for(i=0;i<=length-1;i++)
{
if((name.value.charAt(i)>='a' && ame.value.charAt(i)<='z') || (name.value.charAt(i)>='A' && name.value.charAt(i)<='Z'))
{}
else
{
alert('用户名不符合规则');name.focus();
name.select();
}
}
}//以上函数为名字合理性验证,用到onblur失去焦点事件

function checkdata()
{
var age=document.myform.age;
if(age.value=='')
{
alert('年龄不能为空');
age.focus();
return false;
}
if(! (age.value>0 && age.value<100))
{
alert("你不是顽童就是寿星");
age.focus();
return false;
}//验证年龄
if(myform.password.value.length<4 || myform.password.value.length>10)
{
alert("密码在4到10位之间");
myform.password.focus();
return false;
}//验证密码位数
if(myform.password.value!=myform.password1.value)
{
alert("密码不一致");
return false;
}//验证密码不一致
if(myform.jieshao.value='')
{
alert('个人介绍不能为空');
myform.jieshao.focus();
return false;
}
}
//-->
</script>
</head>
<body onload="myform.name.focus();">
<form action="check.php" method="POST" name="myform" onsubmit="return checkdata();">
<p align="center"><b>自我介绍</b></p>
<center>
<table id="table1" width="508" cellspacing="0" cellpadding="0" border="1" bordercolorlight="#000000" bordercolordark="#FFFFFF">
<tr>
<td height="22">名字:</td>
<td height="22"><input type=text name="name" size=15 maxlength=8 onBlur="namecheckdata();"></td>
<td height="22" width="105">不能为空,只能是字母</td>
</tr>
<tr>
<td height="22">性别:</td>
<td height="22">
男<input type="radio" name="sex" value="男" checked>&nbsp;&nbsp;
女<input type="radio" name="sex" value="女"></td>
<td height="22" width="105">&nbsp</td></tr>
<tr>
<td height="24">年龄:</td><td height="24"><input type=text name="age" size="10" maxlength="8"></td>
<td width="105" height="24">不能为空,在0到100之间</td>
</tr>
<tr>
<td>个人密码:</td>
<td><input type="password" name="password" size=15 maxlength=8></td>
<td width="105">不能为空,4到10位数</td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="password1" size=15 maxlength=8></td>
<td width="105">与个人密码相同</td>
</tr>
<tr>
<td>你的爱好:</td>
<td>
看书<input type="checkbox" name="like1" value="看书">&nbsp;
足球<input type="checkbox" name="like2" value="足球" checked>&nbsp;
音乐<input type="checkbox" name="like3" value="音乐">&nbsp;
爬山<input type="checkbox" name="like4" value="爬山"><!--多选按钮-->
</td>
<td width="105">&nbsp</td>
</tr>
<tr>
<td>你最喜欢的颜色:</td>
<td><select name="color" size="1">
<option name="red">红色
<option name="gress" selected>绿色
<option name="blue">蓝色
</select></td><td width="105">&nbsp</td>
</tr>
<tr>
<td>个人介绍:</td>
<td><textarea cols="36" rows="5" name="jieshao"></textarea></td>
<td width="105">不能为空</td>
</tr>
</table>
<p></p>
<input type="submit" value="提交">&nbsp;&nbsp;
<input type="reset">
</center>
</form>
</body>
</html>

**************************************************************************************

<!--check.php-->

<html>
<head>
<title>验证处理</title>
</head>
<body>
<center>恭喜你,你通过了验证!</center>
</body>
</html>

posted @ 2011-10-10 10:26  Jan.Q  阅读(188)  评论(0)    收藏  举报