开发项目初探 —— jQuery 的使用，制作提交表单，模仿百度注册表单，设置事件
任务目标
模拟制作一个百度的注册表单，并达到提交成功的目的。
制作要求：
- 鼠标移入用户名 =》 提示设置后不可更改；
- 鼠标移出用户名 =》 未输入内容 =》 无提醒；
- 鼠标移出用户名 =》 已输入内容 =》 提醒一个绿色的 OK；
- 鼠标移入手机号 =》 未输入内容 =》 无提醒；
- 鼠标移出手机号 =》 已输入内容 =》 电话字符长度 11 =》提醒一个绿色的 OK；
- 鼠标移出手机号 =》 已输入内容 =》 电话字符长度大于或小于 11 =》提醒一个红色的 error ；
(其他的比如对密码的格式要求，可以使用正则表达式对内容进行限制就可以了，这后面就没有进行展示了)
代码内容
<html><head><meta charset="utf-8"><title>title><link rel="stylesheet" type="text/css" href="./css/表单提交.css" />head><body><form action="#" method="get"><div id="register"><span id="hello">欢迎注册 span><br /><span id="tips1">已有账号？span><a href="xxxx" style="color: royalblue;text-decoration: none;">登陆a>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 // 不符合要求 =》 红色框红色errorusername_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
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！