黑马程序员技术交流社区
标题:
JavaScript验证相关 在线等答案！！！
[打印本页]
作者:
刘立波
时间:
2012-10-15 19:27
标题:
JavaScript验证相关 在线等答案！！！
<!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>注册页面</title>
<script type="text/javascript">
function formSubmit(){
}
</script>
</head>
<body>
<form action="" method="GET">
用户名：<input type="text" name="username" id="username"/>
密 码：<input type="password" name="password" />
确认密码:<input type="password" name="repass"/>
性 别：男<input type="radio" name="sex" value="male"/>
女<input type="radio" name="sex" value="female"/>
城 市：<select>
<option value="beijing" selected="selected">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="chongqing">重庆</option>
</select>
兴趣爱好：<input type="checkbox" name="favo"/>编程
<input type="checkbox" name="favo"/>游戏
<input type="checkbox" name="favo"/>音乐
<input type="checkbox" name="favo"/>运动
个人简介：<textarea rows="10" cols="15" name="intro" ></textarea>
<!-- <input name="btnAdd" type="button" id="btnAdd"
value="注册">-->
<input type="button" value="注册"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
要求： 编写HTML注册表单, 需要字段: 用户名, 密码, 确认密码, 性别(单选), 城市(下拉列表), 兴趣爱好(多选), 个人简介(文本域)。然后使用JavaScript验证这个HTML表单，要求：
1、 用户名: 必须是字母数字或下划线, 不能以数字开头.
2、密码: 6-16位字母数字下划线.
3、确认密码: 和密码一致.
4、其他项为必填.
自己试了很久，总是不成功，求好心人指导
作者:
谭立文
时间:
2012-10-15 21:45
本帖最后由 谭立文 于 2012-10-15 21:49 编辑
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
需求:
1、 用户名: 必须是字母数字或下划线, 不能以数字开头.
2、密码: 6-16位字母数字下划线.
3、确认密码: 和密码一致.
4、其他项为必填.
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册页面</title>
<script type="text/javascript">
window.onload = function()
{
/*
* 1.当失去焦点时对输入框(username)中的数据进行校验
* 校验标准:
* 用户名: 必须是字母数字或下划线, 不能以数字开头.
*/
var usernameNode = document.getElementById("username");
usernameNode.onblur
= function()
{
/*
* 1.取出文本框中的数据
*/
var text = usernameNode.value;
/*
*2.取出首字母
*/
var firstChar = text.charAt(0);
/*
*3.对首字母进行判断，判断前获取显示提示信息的span node
*/
var messageSpanNode = document.getElementById("showMessageSpan_1");
if('a'<=firstChar && firstChar <='z' || 'A'<=firstChar && firstChar <='Z' || firstChar=='_'){
messageSpanNode.innerText = "Ok";
}
else{
messageSpanNode.innerText = "用户名: 必须是字母数字或下划线, 不能以数字开头";
}
}
}
function formSubmit(){
}
</script>
<style type="text/css">
table
{
width:70%;
height:70%;
text-align:center;
margin-left:100px;
border:1px solid blue;
}
table td{
border:1px solid blue;
}
</style>
</head>
<body>
<form action="" method="GET">
<table cellspacing="0">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" name="username" id="username"/> <span id="showMessageSpan_1"></span><br/>
</td>
</tr>
<tr>
<td>
密 码：
</td>
<td>
<input type="password" name="password" /> <br/>
</td>
</tr>
<tr>
<td>
确认密码:
</td>
<td>
<input type="password" name="repass"/> <br/>
</td>
</tr>
<tr>
<td>
性 别：
</td>
<td>
男<input type="radio" name="sex" value="male"/>
女<input type="radio" name="sex" value="female"/>
</td>
</tr>
<tr>
<td>
城市：
</td>
<td>
<select>
<option value="beijing" selected="selected">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="chongqing">重庆</option>
</select>
</td>
</tr>
<tr>
<td>
兴趣爱好：
</td>
<td>
<input type="checkbox" name="favo"/>编程
<input type="checkbox" name="favo"/>游戏
<input type="checkbox" name="favo"/>音乐
<input type="checkbox" name="favo"/>运动
</td>
</tr>
<tr>
<td>
个人简介：
</td>
<td>
<textarea rows="10" cols="15" name="intro"> </textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="注册"/><input type="reset" value="重置"/>
</td>
</tr>
</table>
<!-- <input name="btnAdd" type="button" id="btnAdd"
value="注册">-->
</form>
</body>
</html>
写了一个，其他的几个都类似，虽然有很多开源的框架，像JQuery，别人也是用脚本写出来的，自己也要会点，真正的还是用框架比较多，方便。
作者:
刘立波
时间:
2012-10-15 21:56
谭立文 发表于 2012-10-15 21:45
注册页面
谢谢谢谢
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
