一个学习中遇到的的问题

袁梦希

编写HTML注册表单, 需要字段: 用户名, 密码, 确认密码, 性别(单选), 城市(下拉列表), 兴趣爱好(多选), 个人简介(文本域)。

然后使用JavaScript验证这个HTML表单，要求：

      1、用户名: 必须是字母数字或下划线, 不能以数字开头.

      2、密码: 6-16位字母数字下划线.

      3、确认密码: 和密码一致.

      4、其他项为必填.

刘学明 · 刘学明

看毕向东老师最后一个JS案例

xiewen · xiewen

看了很久都没人帮你解答这个题，我花了一点时间帮你把它做完了，代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户注册</title>
<script type="text/javascript" language="javascript">
<!--
function check(name,lable){
this.uname=name;
this.lable=lable;
}
function validate(objform){
var regName=/^\D[\d\w_]+$/;// 用户名: 必须是字母数字或下划线, 不能以数字开头.
var regPassword=/[\d\w_]{6,16}/;//密码: 6-16位字母数字下划线.
var hobby=document.getElementsByName("hobby");//得到所有兴趣爱好
var textarea=document.getElementsByTagName("textarea")[0];
var arr=new Array(
new check("usename","用户名"),new check("password","密码"),new check("rpassword","确认密码")
);
for(var i=0;i<arr.length;i++){
var name=eval("objform."+arr[i].uname);
if(name.value==""){
alert(arr[i].lable+"不能为空");
return false;
}
if(!regName.test(eval("objform."+arr[0].uname).value)){
alert(" 用户名必须是字母数字或下划线, 不能以数字开头.");
return false;
}
if(!regPassword.test(eval("objform."+arr[1].uname).value)){
alert("密码要求6-16位字母数字下划线.");
return false;
}
if(eval("objform."+arr[1].uname).value!=eval("objform."+arr[2].uname).value){
alert("两次输入的密码不一致");
return false;
}
}
var flag=false;
for(var i=0;i<hobby.length;i++){
if(hobby[i].checked==true){
flag=true;
}
}
if(!flag){
alert("兴趣爱好不能为空");
return false;
}
if(textarea.value==""){
alert("个人简历好不能为空");
return false;
}
}
function sureSubmit(form){
return validate(form);
}
//-->
</script>
</head>
<body>
<form method="post" action="" onsubmit="return sureSubmit(this)">
<table>
<tr align="right">
<td>用户名：</td>
<td align="left"><input type="text" name="usename"/></td>
</tr>
<tr align="right">
<td>密码：</td>
<td align="left"><input type="password" name="password"/></td>
</tr>
<tr align="right">
<td>确认密码：</td>
<td align="left"><input type="password" name="rpassword" u/></td>
</tr>
<tr align="right">
<td>性别：</td>
<td align="left">
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr align="right">
<td>城市：</td>
<td align="left">
<select>
<option value="北京">北京</option>
<option value="上海" >上海</option>
<option value="南京">南京</option>
<option value="天津">天津</option>
<option value="江西">江西</option>
<option value="湖南">湖南</option>
<option value="湖北">湖北</option>
<option value="深圳">深圳</option>
</select>
</td>
</tr>
<tr align="right">
<td>兴趣爱好：</td>
<td align="left">
<input type="checkbox" value="篮球" name="hobby"/>篮球
<input type="checkbox" value="足球" name="hobby"/>足球
<input type="checkbox" value="排球" name="hobby"/>排球
<input type="checkbox" value="游泳" name="hobby"/>游泳
<input type="checkbox" value="爬山" name="hobby"/>爬山
<input type="checkbox" value="健身" name="hobby"/>健身
<input type="checkbox" value="阅读" name="hobby"/>阅读
</td><span></span>
</tr>
<tr align="right">
<td>个人简介：</td>
<td align="left">
<textarea rows="20" cols="20" name="include"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
</body>
</html>

复制代码

黑马云青年为您解答

821728010

呵呵！

xiewen · xiewen

821728010 发表于 2013-5-27 19:37
呵呵！

呵呵是啥意思？

袁梦希 · 袁梦希

如果问题已经解决，请把帖子的类型改为已经解决，如果不会解决请看我的个性签名。

帐号		自动登录	找回密码
密码			加入黑马

一个学习中遇到的的问题

评分

5 个回复

评分

黑马骑士勋章