用户注册升级版

最新推荐文章于 2023-05-28 02:57:00 发布

Y_林大俊

最新推荐文章于 2023-05-28 02:57:00 发布

阅读量392

点赞数

文章标签：注册登录

本文链接：https://blog.csdn.net/qqABCDYOONA/article/details/78119106

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
p {
text-indent: 30px;
}
input{
outline: none;
}
.isNull{
border: 1px solid blue;
}
</style>

<script>
var names = ["猪","小沙皮","短腿柯基"];

function mySub(){
var k = 0;
var name = document.forms['myForm']['user'];
var pwd = document.forms['myForm']['pwd'];
var hobbys = document.forms['myForm']['hobby']
var school = document.forms['myForm']['school'];

// 获取用户姓名前后空格
if(name.value.trim()==""){
name.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"
alert("你是出家了嘛，六根如此清净！！！");
}

if(school.value == "请选择"){
school.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 = "";
}
}

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

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

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

<form name="myForm" action="a.html" method="post" οnsubmit="return mySub()">
<p>
用户姓名:<input type="text" name="user" οnfοcus="inputFocus(this)" οnblur="isName(this)"/>
<span id="isCan" style="font-size: 14px; color: red;"></span>
</p>

<p>
登录密码:<input type="password" name="pwd" οnfοcus="inputFocus(this)"/>
</p>

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

<p id="isHobby">
高尚的追求：<br />
<input type="checkbox" name="hobby" value="运动" οnclick="mySelect()"/>运动
<input type="checkbox" name="hobby" value="阅读" οnclick="mySelect()"/>阅读
<input type="checkbox" name="hobby" value="搞基" οnclick="mySelect()"/>搞基
<input type="checkbox" name="hobby" value="恋爱" οnclick="mySelect()"/>恋爱<br />
<input type="checkbox" name="hobby" value="钱" οnclick="mySelect()"/>在家数钱<br />
<input type="checkbox" name="hobby" value="游戏" οnclick="mySelect()"/>打游戏
<input type="checkbox" name="hobby" value="影视" οnclick="mySelect()"/>追剧狂
</p>

<p>
学历:
<select name="school" οnchange="myChange(this)">
<option>请选择</option>
<option>光荣的劳动人民</option>
<option>幼稚的小学</option>
<option>枯燥的初中</option>
<option>嗨皮的高中</option>
<option>噩梦般的大学</option>
</select>
</p>

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

</html>