<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="10.js"></script>
</head>
<body>
<!--
编写HTML注册表单, 需要：用户名, 密码, 确认密码, 性别，省份, 爱好，个人介绍。
然后使用JavaScript验证这个HTML表单，要求： 用户名: 必须是字母数字或下划线, 不能以数字开头.密码: 6-16位字母数字下划线.确认密码
-->
<form action="" method="post" id="myform">
<table border="1" align="center" width="40%">
<caption>注册</caption>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" name="username" id="username" class="input_class" />
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="password" name="password" id="password" class="input_class" />
</td>
</tr>
<tr>
<td>
确认密码:
</td>
<td>
<input type="password" name="repassword" id="repassword" class="input_class" />
<span id="repassword_span">两次密码不一致</span>
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<input type="radio" name="sex" id="man" value="男" checked="checked" />男
<input type="radio" name="sex" id="woman" value="女" />女
</td>
</tr>
<tr>
<td>
省份:
</td>
<td>
<select name="province" id="province">
<option value="--请选择--">--请选择--</option>
<option value="河南省">河南省</option>
<option value="湖南省">湖南省</option>
<option value="云南省">云南省</option>
<option value="海南省">海南省</option>
</select>
</td>
</tr>
<tr>
<td>
爱好:
</td>
<td>
<input type="checkbox" name="likes" id="study" value="学习" />学习
<input type="checkbox" name="likes" id="sport" value="运动" />运动
<input type="checkbox" name="likes" id="movie" value="看电影" />看电影
</td>
</tr>
<tr>
<td valign="top">
个人介绍:
</td>
<td>
<textarea rows="10" cols="40" name="myself" id="myself"></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
//下面是js代码。
//用户名：6-16任意字符组合
var usernameRegex = /^\w{6,16}$_/;
//密码：6-16任意字符组合
var passwordRegex = /^\w{6,16}$_/;
function validateForm()
{
var flag = true;
//用户名
var usernameNode = byId("username");
var username = usernameNode.value;
if(!usernameRegex.test(username))
{
alert("用户名不符要求");
flag = false;
}
//密码
var passwordNode = byId("password");
var password = passwordNode.value;
if(!passwordRegex.test(password))
{
alert("密码不符要求");
flag = false;
}
//确认密码
var repasswordNode = byId("repassword");
var repassword = repasswordNode.value;
if(!passwordRegex.test(repassword))
{
alert("密码不一致");
flag = false;
}
//爱好
var likesCount = 0;
var likesNodes = document.getElementsByName("likes");
for(var x=0; x<likesNodes.length; x++)
{
var likesNode = likesNodes[x];
//if(likesNode.checked==true)
if(likesNode.checked)
{
likesCount++;
}
}
if(likesCount==0)
{
alert("爱好不能为空");
byId("study").focus();
return;
}
//省份
var provinceNode = byId("province");
var province = provinceNode.value;
if("--请选择--"==province)
{
alert("省份不能为空");
provinceNode.focus();
return;
}
//个人介绍
var myselfNode = byId("myself");
var myself = myselfNode.value;
if(""==myself)
{
alert("个人介绍不能为空");
myselfNode.focus();
return;
}
}
function byId(id)
{
return document.getElementById(id);
}
|
收藏
淘帖
踩
