任务目标
模拟制作一个百度的注册表单,并达到提交成功的目的。
制作要求:
- 鼠标移入用户名 =》 提示设置后不可更改;
- 鼠标移出用户名 =》 未输入内容 =》 无提醒;
- 鼠标移出用户名 =》 已输入内容 =》 提醒一个绿色的 OK;
- 鼠标移入手机号 =》 未输入内容 =》 无提醒;
- 鼠标移出手机号 =》 已输入内容 =》 电话字符长度 11 =》提醒一个绿色的 OK;
- 鼠标移出手机号 =》 已输入内容 =》 电话字符长度大于或小于 11 =》提醒一个红色的 error ;
(其他的比如对密码的格式要求,可以使用正则表达式对内容进行限制就可以了,这后面就没有进行展示了)
代码内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/表单提交.css" />
</head>
<body>
<form action="#" method="get">
<!-- 如果是get方式提交
提交的数据会显示在浏览器的地址栏上
哪些数据会被提交?
一定要给对象设置一个name属性-->
<div id="register">
<span id="hello">欢迎注册 </span><br />
<span id="tips1">已有账号?</span><a href="xxxx" style="color: royalblue;text-decoration: none;">登陆</a>
<!-- a标签设置:decoration none 取消下划线 -->
</div>
<div id="div_list">
<span id="tips2">用户名</span>
<input type="text" name="username" id="input_username" placeholder=" 请设置用户名" /><br />
<span id="check_info"> </span>
</div>
<div id="div_list">
<span id="tips2">手机号</span>
<input type="text" name="userphone" id="input_userphone" placeholder=" 可用于登陆和找回密码" /><br />
<span id="check_info"> </span>
</div>
<div id="div_list">
<span id="tips2">密 码</span>
<input type="text" name="userpaswd" id="input_userpaswd" placeholder=" 请设置登陆密码" /><br />
<span id="check_info"> </span>
</div>
<div id="div_list">
<span id="tips2">验证码</span>
<input type="text" name="验证码" id="input_yz" placeholder=" 请输入验证码" />
<button type="button" id="get_yz">获取验证码</button>
</div>
<div id="div_list">
<button type="submit" id="button_zhuce" value="注册-submit">注册</button><br />
<input type="checkbox" name="hobby" value="h1" /> <span id="check_xx">阅读并接收</span><a href=""
id="a_xx">《百度用户协议》</a><span id="check_xx">及</span><a href="" id="a_xx">《百度隐私权保护协议》</a>
</div>
</form>
<script src="./js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
// 这里对事件进行设置
// 用户名设置
// 鼠标移入提示:用户名设置不可更改
// 光标以出框中:没有内容 =》 无提醒
// 符合要求 =》 绿色的 ok
// 不符合要求 =》 红色框红色error
username_obj = $("#input_username")
username_obj.focus(function() {
username_obj.siblings("span#check_info").text("设置后不可更改")
})
// 光标移出,效果消除
username_obj.blur(check_username)
function check_username() {
if (this.value.length == 0) {
username_obj.siblings("span#check_info").text("")
username_obj.siblings("span#check_info").css({
"color": "dimgray"
})
} else {
username_obj.siblings("span#check_info").text("OK")
username_obj.siblings("span#check_info").css({
"color": "green"
})
}
}
// jquery 对象可以使用 =》 obj.val()获取值
// 原生 this =》 this.value 获取值
userphone_obj = $("#input_userphone")
// console.log(userphone_obj.siblings("span"))
// console.log(userphone_obj)
userphone_obj.blur(check_userphone)
function check_userphone() {
if (this.value.length == 0) {
userphone_obj.siblings("span#check_info").text("")
userphone_obj.siblings("span#check_info").css({
"color": "dimgray"
})
}else if (this.value.length == 11) {
userphone_obj.siblings("span#check_info").text("ok")
userphone_obj.siblings("span#check_info").css({
"color": "green"
})
}else {
userphone_obj.siblings("span#check_info").text("error")
userphone_obj.siblings("span#check_info").css({
"color": "red"
})
}
}
</script>
</body>
</html>
CSS 代码:
form {
width: 500px;
height: 600px;
border: #000000 1px solid;
border-radius: 15px;
background-color: snow;
}
#input_username {
height: 65%;
width: 83%;
float: left;
margin-top: 2px;
border: 1px solid #cecece;
border-radius: 5px;
}
#input_userpaswd {
height: 65%;
width: 83%;
float: left;
margin-top: 2px;
border: 1px solid #cecece;
border-radius: 5px;
}
#input_userphone {
height: 65%;
width: 83%;
float: left;
margin-top: 2px;
border: 1px solid #cecece;
border-radius: 5px;
}
#input_yz {
height: 65%;
width: 52%;
float: left;
margin-top: 2px;
border: 1px solid #cecece;
border-radius: 5px;
}
#get_yz {
background-color: whitesmoke;
height: 65%;
width: 28%;
float: right;
margin-top: 2px;
border: 0px;
border-radius: 5px;
}
#button_zhuce {
height: 80%;
width: 100%;
background-color: powderblue;
color: whitesmoke;
border: 0px;
border-radius: 30px;
}
#div_list {
height: 65px;
width: 80%;
margin-left: 50px;
align-items: center;
margin-top: 10px;
/* background-color: #00FFFF; */
}
#register {
margin-top: 40px;
height: 120px;
margin-left: 50px;
width: 80%;
/* border: #808080 1px solid; */
/* background-color: #0000FF; */
}
#hello {
font-size: 40px;
font-family: "黑体";
font-weight: 700;
}
#tips1 {
color: #778899;
}
#tips2 {
height: 90%;
width: 15%;
float: left;
margin-top: 15px;
/*border: #000000 1px solid; */
color: dimgray;
}
/* 设置input里面placeholder元素状态 */
input::-webkit-input-placeholder {
color: lightgray;
}
#check_xx {
font-size: 3px;
}
#check_info {
font-size: 3px;
}
#a_xx {
font-size: 3px;
text-decoration: none;
}
最后展示效果图:
模仿的还是比较成功的 dog