Web前端之注册信息

最新推荐文章于 2023-10-17 17:19:50 发布

木_心

最新推荐文章于 2023-10-17 17:19:50 发布

阅读量719

点赞数

分类专栏： web前端文章标签： web前端表单注册登录

本文链接：https://blog.csdn.net/luckily_star/article/details/78093892

版权

web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

用户注册

用户名：

密码：

性别：男女

爱好：篮球足球羽毛球乒乓球

学历：请选择中学大专本科研究生

全选反选

篮球足球乒乓球羽毛球网球

<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
p{
text-align: center;
}
input{
outline: none;
}
.isNull{
border: 1px solid red;
}
</style>


<script>
var names=["tom","jack","lily"];
 
function mySub(){

var k=0;

var userName = document.forms['myForm']['userName'];
var pwd = document.forms['myForm']['pwd'];
var hobbys = document.forms['myForm']['hobby']
var xl = document.forms['myForm']['xl'];

//判断内容是否为空
if(userName.value.trim()==""){
userName.className = "isNull";
}

if(pwd.value.trim() == ""){
pwd.className = "isNull";
}

for(var i = 0 ; i < hobbys.length ; i++){
if(hobbys[i].checked == true){
k++;
}
}

if(k<1){
document.getElementById("isHobby").className = "isNull";
}

if(xl.value == "请选择"){
xl.className = "isNull";
}

return false;
}


 
 
//还原表单元素样式
function inputFocus(obj){
obj.className = "";
}
 
//判断用户是否重复
function isName(obj){
var b = true;

for (var i=0 ; i<names.length ; i++) {
var n = names[i];
if(n == obj.value){
document.getElementById("isCan").innerHTML = "用户名以被注册！";
obj.className = "isNull";
b = false;
break;
}

}

if(b){
//当用户名不重复时
document.getElementById("isCan").innerHTML = "";
}

}



if(b){
//当用户名不重复用时

document.getElementById("isCan").innerHTML = "";

}

//下拉框内容改变事件
function myChange(obj){
if(obj.value != "请选择"){
obj.className = "";
}
}


 


//复选框事件
function mySelect(){
document.getElementById("isHobby").className = "";
}


 
</script>
</head>
<body>
<h1>用户注册</h1>
<hr />

<form name="myForm" action="a.html" method="get" onsubmit="return mySub()">
<p>
用户名：
<input name="userName" type="text" onfocus="inputFocus(this)" onblur="isName(this)"/>
<span id="isCan" style="font-size: 14px; color: red;"></span>
</p>

<p>
密码：<input name="pwd" type="password" onfocus="inputFocus(this)" />
</p>

<p>
性别：
<input type="radio" name="sex" value="男" checked /> 男
<input type="radio" name="sex" value="女" />女
</p>

<p id="isHobby">
爱好：
<input type="checkbox" name="hobby" value="篮球" onclick="mySelect()" />篮球
<input type="checkbox" name="hobby" value="足球" onclick="mySelect()" />足球
<input type="checkbox" name="hobby" value="羽毛球" onclick="mySelect()" />羽毛球
<input type="checkbox" name="hobby" value="乒乓球" onclick="mySelect()" />乒乓球
</p>

<p>
学历：<select name="xl" onchange="myChange(this)">
<option>请选择</option>
<option>中学</option>
<option>大专</option>
<option>本科</option>
<option>研究生</option>
</select>
</p>

<p>
<input type="submit" />
</p>
</form>
</body>
</html>