黑马程序员技术交流社区

标题: 基础测试 [打印本页]

作者: 宋大人-专注 时间: 2014-6-1 10:30
标题: 基础测试
本帖最后由宋大人-专注于 2014-6-2 22:20 编辑

9、编写HTML注册表单，需要字段：用户名、密码、确认密码,、性别（单选）、兴趣爱好（多选）、城市（下拉列表）、个人简介(文本域)
使用JavaScript验证这个表单，要求：
      1、用户名：字母数字或下划线10位以内，只能以字母开头
      2、密码：6-16位任意字符
      3、确认密码：和密码保持一致.
      4、其他项为必填
谁能帮帮忙，我对JavaScript不大懂

作者: 苏周周 时间: 2014-6-1 18:48

<html>
<head>
<title>表单的验证</title></head>
<body>
<form action = "#" method = "get" name = "form1" onsubmit = "return check(event)">
<table align = "center" border = "0px
<form method="post" action="#" width = "800px" >
<tr><td colspan = "2" align = "center">注册</td></tr>
<tr><td align = "center" width = "120px">用户名:</td><td><input type = "text" name = "username"/></td></tr>
<tr><td align = "center">密码:</td><td><input type = "password" name = "password"/></td></tr>
<tr><td align = "center">再次确认：</td><td><input type = "password" name = "password1"/></td></tr>

<tr><td align = "center">性别:</td><td><input type = "radio" checked name = "sex"/>男<input type = "radio" name="sex"/>女</td></tr>
<tr><td align = "center">兴趣爱好:</td><td id = "habby"><input type = "checkbox"/>喝酒<input type = "checkbox"/>抽烟<input type = "checkbox"/>烫头</td></tr>
<tr><td align = "center">城市:</td><td><select name = "select1">
<option value = "5" selected>--请选择--</option>
<option value = "0">北京</option>
<option value = "1">上海</option>
<option value = "2">广州</option>
</select></td></tr>
<tr><td colspan = "2">个人简历:</td></tr>
<tr><td colspan = "2"><textarea name="text" rows="4" cols="30"></textarea></td></tr>

<tr><td colspan = "2" align = "center"><input type = "submit" value = "提交" /></td></tr>

</table>
</form>
</body>


<script language = "javascript" type = "text/javascript">
document.form1.username.onblur = function () {
checkName();
}

document.form1.password.onblur = function () {
checkPassword();
}

document.form1.password1.onblur = function () {
checkPass();
}

function check(event) {
var flag = true;
var flag1 = checkName();
var flag2 = checkPassword();
var flag3 = checkPass();
var flag4 = selectTwo();
var flag5 = checkEducation();
var flag6 = text1();
flag = flag1 && flag2 && flag3 && flag4 && flag5 && flag6;
return flag;
}

//简历
function text1() {

var uPass = document.form1.text.value;
if (uPass == 0) {
tiShi(document.form1.text,"请输入简历");
return false;
}else {
delms(document.form1.text);
return true;
}
}

//验证用户名规定要以字母开头由10位以内
function checkName() {
var reg = /^[a-zA-Z][a-zA-Z0-9_]{0,9}$/g;

//获取用户名的内容
var uName = document.form1.username.value;
var uOb = document.form1.username;
if (!reg.test(uName)) { //如果验证不成功的话就提示用户
tiShi(uOb,"请输入以字母开头的用户名6到10位");
return false;
} else { //如果成功的话就删除原来的提示信息span
delms(uOb);
return true;
}

}

//验证密码是否是6-16位
function checkPassword() {

var uPass = document.form1.password.value;
if (uPass.length < 6 || uPass.length > 16) {
tiShi(document.form1.password,"请输入6-16位的密码");
return false;
}else {
delms(document.form1.password);
return true;
}
}

//确认密码

function checkPass() {
if (document.form1.password.value != document.form1.password1.value) {
tiShi(document.form1.password1,"你输入的密码与前面不符");
return false;
} else {
delms(document.form1.password1);
return true;
}
}

//至少要选择1个爱好
function selectTwo () {
var arr1 = document.getElementById("habby");
var arr = arr1.getElementsByTagName("input");
var count = 0;
for (var i = 0;i < arr.length ; i++ ) {
if (arr[i].checked) {
count++;
}
}

if (count == 0) {
tiShi(arr[0],"至少要选择1个爱好");
return false;
} else return true;
}

//选择城市
function checkEducation() {
var xueli = document.form1.select1;
var arr = xueli.options;
var count = 0;
for (var i = 1; i < arr.length ;i++ ) {
if (arr[i].selected) {
count++;
}
}
if (count != 0) {
return true;
}
else {
return false;
}
}

//创建一个提示用户的方法
function tiShi(dui,mess) {
var ob = dui.parentNode;

var oldSpan = ob.getElementsByTagName("span")[0];

if (!oldSpan)
{

//创建一个span的元素添加到对应的错误区域
var s = document.createElement("span");
s.innerHTML = mess;
s.style.color = "red";
ob.appendChild(s);
}
}

//删除提示信息span
function delms(ob) {
var oo = ob.parentNode;
var o1 = oo.getElementsByTagName("span")[0];
if (o1){
oo.removeChild(o1);
}

}

</script>
</html>

作者: 宋大人-专注 时间: 2014-6-2 07:54
谢谢:handshake

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2