• JavaScript注册页面的前端验证(1+X Web前端开发初级 例题)

    文章目录

    📄题目要求

    🧩说明

    🧩效果图

    🧩补充：题目文件结构

    💻HTML代码

    💻CSS代码

    💻JavaScript代码

    🎯实现效果

    1️⃣测试一

    2️⃣测试二

    📰完整答案

    📄题目要求

    • 阅读下列说明、效果图和代码，进行静态网页开发，填写（1）至（10）代码。

    🧩说明

    • 现接到某电商网站注册、登录页面开发的项目，在注册页面需要做前端验证。具体要求：用户名长度和格式验证、邮箱格式验证、密码长度和格式验证、密码与重复密码一致性验证。

    • 项目名称为verify，包含首页index.html、css文件夹、js文件夹，其中，css文件夹包含style.css文件，js文件夹包含index.js文件。

    • 根据注释，补全代码，在（1）至（10）处填入正确的内容。

    🧩效果图

    🧩补充：题目文件结构

    💻HTML代码

    1. html>
    2. <html>
    3.  
    4. <head>
    5. 	<title>第三题title>
    6. 	<meta charset="utf-8">
    7. 	<link rel="stylesheet" type="text/css" href="css/style.css">
    8. head>
    9. <body>
    10. 	<div class="box" id="box">
    11. 		<h2>注册h2>
    12. 		<form action="" method="get">
    13. 			<ul>
    14. 				<li>
    15. 					<label><span>*span>用户名：label>
    16. 					<input type="text" name="username" placeholder="只能输入6-20个字母、数字、下划线" id="username">
    17. 				li>
    18. 				<li>
    19. 					<label><span>*span>电子邮箱：label>
    20. 					<input type="text" name="email" placeholder="输入正确的电子邮箱地址" id="email">
    21. 				li>
    22. 				<li>
    23. 					<label><span>*span>密码：label>
    24. 					<input type="password" name="pwd" placeholder="由字母开头,包含字母、数字、下划线,6-16位" id="pwd">
    25. 				li>
    26. 				<li>
    27. 					<label><span>*span>确认密码：label>
    28. 					<input type="password" name="pwdOk" placeholder="确认密码必须与密码一致" id="pwdOK">
    29. 				li>
    30. 			ul>
    31. 			<button name="submit">提交button>
    32. 		form>
    33. 	div>
    34. 	<script src="js/index.js">script>
    35. body>
    36.  
    37. html>

    💻CSS代码

    1. body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
    2. 	margin: 0;
    3. 	padding: 0;
    4. }
    5.  
    6. ul{
    7. 	list-style: none;
    8. }
    9. input{
    10. 	border:0;
    11. }
    12. .clear:after{
    13. 	content: "";
    14. 	display: block;
    15. 	clear: both;
    16. }
    17. .box{
    18. 	width: 500px;
    19. 	margin:30px auto;
    20. 	padding:30px 40px;
    21. 	border:1px solid #ddd;
    22. 	box-shadow: 0 0 10px #bbb;
    23. 	box-sizing: border-box;
    24. }
    25. .box h2{
    26. 	text-align: center;
    27. 	color:#666;
    28. 	font-size: 22px;
    29. 	line-height: 40px;
    30. }
    31. .box form{
    32. 	padding:15px 0;
    33. }
    34. .box form ul li{
    35. 	display: flex;
    36. 	height: 40px;
    37. 	line-height: 40px;
    38. 	margin-bottom: 15px;
    39. }
    40. .box form ul li input{
    41. 	border:1px solid #ddd;
    42. 	height: 38px;
    43. 	padding:0 10px;
    44. 	line-height: 38px;
    45. 	flex:1;
    46. 	box-sizing: border-box;
    47. }
    48. .box form ul li label{
    49. 	display: block;
    50. 	width: 120px;
    51. }
    52. .box form ul li label span{
    53. 	color:red;
    54. 	padding-right:10px;
    55. }
    56. .box form button{
    57. 	width: 100%;
    58. 	border:none;
    59. 	height: 40px;
    60. 	background-color: green;
    61. 	color:#fff;
    62. }

    💻JavaScript代码

    本题考点都在JavaScript的内容

    1. function validate_strLenght(str) {
    2.     var regExp = /^(\w){6,20}$/;
    3.     return regExp.test(str);
    4. }
    5.  
    6. function validate_email(str) {
    7.     var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    8.     return regExp.test(str);
    9. }
    10.  
    11. function validate_pwd(str) {
    12.     var regExp = /^[a-zA-Z]\w{5,15}/;
    13.     return regExp.test(str);
    14. }
    15. // （1）根据表单控件user的id填写
    16. // var username = document.getElementById("     （1）     ");
    17. var username = document.getElementById("username");
    18.  
    19. //（2）通过id获取元素
    20. // var email = document.       （2）      ("email");
    21. var email = document.getElementById("email");
    22.  
    23. //（3）根据表单控件pwd的id填写
    24. // var pwd = document.getElementById("    （3）     ");
    25. var pwd = document.getElementById("pwd");
    26.  
    27. //（4）通过id获取元素
    28. // var pwdOK = document.       （4）       ("pwdOK");
    29. var pwdOK = document.getElementById("pwdOK");
    30.  
    31. //（5）通过标签名获取元素
    32. //  var form = document.        （5）         ("form")[0];
    33. var form = document.getElementsByTagName("form")[0];
    34.  
    35. //（6）表单提交
    36. // form.      （6）        = function () {
    37. form.onsubmit = function () {
    38.     //（7）（8）使用自定义方法验证用户名、验证邮箱
    39.     // if (validate_strLenght(      （7）      ) &&      （8）     (email.value) && validate_pwd(pwd.value) && checkOk()) {
    40.     if (validate_strLenght(username.value) && validate_email(email.value) && validate_pwd(pwd.value) && checkOk()) {
    41.         console.log(username.value)
    42.         console.log(email.value)
    43.         console.log(pwd.value)
    44.         return false;
    45.     } else {
    46.         //（9）控制台输出
    47.         // （9）        .log("验证失败")
    48.         console.log("验证失败")
    49.         return false;
    50.     }
    51. }
    52.  
    53. // 检查用户名
    54. username.onblur = function () {
    55.     if (validate_strLenght(username.value)) {
    56.         console.log("用户名符合要求")
    57.     } else {
    58.         console.log("用户名不符合要求")
    59.     }
    60. }
    61.  
    62. //检查meil
    63. email.onblur = function () {
    64.     if (validate_email(email.value)) {
    65.         console.log("邮箱格式符合要求")
    66.     } else {
    67.         console.log("邮箱格式不符合要求")
    68.     }
    69. }
    70.  
    71. // （10）密码框失去焦点的时候
    72. // pwd.     （10）       = function () {
    73. pwd.onblur = function () {
    74.     if (validate_pwd(pwd.value)) {
    75.         console.log("密码符合要求")
    76.     } else {
    77.         console.log("密码不符合要求")
    78.     }
    79. }
    80.  
    81. function checkOk() {
    82.     if (pwd.value == pwdOK.value) {
    83.         console.log("密码与重复密码一致")
    84.         return true
    85.     } else {
    86.         console.log("密码与重复密码不一致")
    87.         return false
    88.     }
    89. }
    90.  
    91. pwdOK.onkeyup = checkOk

    🎯实现效果

    输入要求如下。

    1️⃣测试一

    首先输入符合要求的信息。

    2️⃣测试二

    输入不符合要求的信息。

    📰完整答案

    试题三（20分）
    【问题】（20分）
    （1）username
    （2）getElementById
    （3）pwd
    （4）getElementById
    （5）getElementsByTagName
    （6）onsubmit
    （7）username.value
    （8）validate_email
    （9）console
    （10）onblur
    （每空2分，共20分）

    🎯点赞收藏，防止迷路🔥 

  • 相关阅读:
    Qt5开发从入门到精通——第四篇十三节（程序启动画面 ）
    try-except 搭配装饰器使用
    创客匠人助力职教机构快速实现数字化经营
    P1972 [SDOI2009] HH的项链
    1.摄像机几何
    idea中maven导入依赖不进行提示的问题（已经解决）
    【从小白到大白01】c++类和对象
    【机器学习12】集成学习
    Rest和Http什么关系？
    .net+bootstrap写的一个还不错的音乐网站
  • 原文地址：https://blog.csdn.net/weixin_53231455/article/details/127739755