사용자 등록 정보를 수집하기 위해 등록 HTML 페이지를 개발합니다. 포함사항: 이름(비워둘 수 없음), 나이(17세 이상), 체중(30-150kg), 클래스(드롭다운 목록), 로그인 비밀번호(8자 이상), 확인 비밀번호(로그인과 동일) 비밀번호), 이메일((비워둘 수 없음), 전화번호, QQ, 이력서 및 기타 정보. 그리고 이러한 테이블의 요소에 대해 해당 유효성 검사를 생성합니다. 오류가 감지되면 입력 상자 뒤에 빨간색 단어로 오류가 표시됩니다. 이전 섹션에서 배운 한 줄 텍스트 입력 상자 텍스트, 드롭다운 목록 상자 선택, 비밀번호 입력 상자 비밀번호 및 여러 줄 텍스트 입력 상자 텍스트 영역을 사용해야 합니다. 이것은 보다 실용적인 사용자 등록 양식입니다.
register.html:
실험 2<br>< ;link href="check.css" rel="stylesheet" type="text/css"> <br><script type="text/javascript" src="load.js"> >< /script> <br><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <br><!--양식을 지울지 여부를 확인하는 유효성 검사()--><body onload="load_greeting ()"> <br><form id="test" align="left" onSubmit="return verify()"> <br><table> <br><tr> <br>< td>이름*: </td> <br><td><input type="text" name="Name" id="name" size="20" onChange='check("name")' ></ td> <br><td id="nameCheck" class="check" Hidden="true">*이름은 비워둘 수 없습니다</td> <br></tr> <tr> <br><td>나이:</td> <br><td><input type="text" name="Age" id="age" size="20" onChange= 'check(" age")'></td> <br><td id="ageCheck" class="check" Hidden="true">*나이는 17세 이상이어야 합니다</td> ; <BR>< /tr> <br><td>중량:</td><input type="text" name=" " id="weight" size="20" onchange='check("weight")'><td id="weightCheck" class="check" Hidden="true"> ;*중량 범위는 30~150KG입니다. <br></tr> <br><tr><br><td><br></td>
<td>< ;select id="class" name="class"> <br><option>class0</option> <br><option>class1</option> <br><option>class2</option> <br><옵션> 클래스3</option> <br></td> <br><tr> 비밀번호*:</td> <br><td><input type="password" name="Password" id="password" size="20" onChange='check("password")'> </td> <br><td id="passwordCheck" class="check" hiden="true">*비밀번호 길이가 8보다 작습니다</td> <br></tr> ;tr> <br>< ;td>비밀번호 확인*:</td> <br><td><input type="password" name="cpassword" id="cpassword" size="20" onChange ='check("cpassword" )'></td> <br><td id="cpasswordCheck" class="check" Hidden="true">*두 비밀번호가 동일하지 않습니다</td> 🎜></tr> <br><tr > <br><td>이메일*:</td><br><td><input type="email" name="email" id="email" size= "20" onChange='check(this.id)'></td> <br><td id="emailCheck" class="check" Hidden="true"> *잘못된 이메일 이름입니다! </td> <br> <br><td> 전화:</td> <br><td></tr> <br><tr>QQ:</td> <br><td><input type="text" name="QQ" id="QQ" size="20"></td> <br></tr> tr> <br><td>개인 정보:</td> <br><td><textarearows="10" cols="19"></textarea><br></tr> <br><tr> <br><td colspan="3"> <br><input type="submit" name="submit"> input type="reset" name="reset"> <br></tr><br></form> /본문> <br></html> <br><br><br>check.css: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="69257" class="copybut" id="copybut69257" onclick="doCopy('code69257')"><u>复제대码</u></a></span> 代码如下:</div>
<div class="codebody" id="code69257"> <br>td.check{ <br>색상:#C00; <br>글꼴 두께:굵게; <br>} <br>
</div> <br>load.js: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="47231" class="copybut" id="copybut47231" onclick="doCopy('code47231')"><u>复代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code47231"> <br>함수 검사(str) <br>{ <br>var x = document.getElementById(str); <br>var y = document.getElementById(str "Check"); <br>//alert("확인하세요!"); <br>if(str=="name") <br>{ <br>if(x.value=="") <br>y.hidden = false; <br>else <br>y.hidden = true; <br>} <br>else if(str=="age") <br>{ <br>if(isNaN(x.value) || x.value < 17) <br>y.hidden = false; <br>else <br>y.hidden = true; <br>} <br>else if(str=="weight") <br>{ <br>x = x.value; <br>if(isNaN(x) || x 150) <br>y.hidden = false; <br>else <br>y.hidden = true; <br>} <br>else if(str=="password") <br>{ <br>x = x.value.length; <br>if(x { <br>y.hidden = false; <br>//alert("확인하세요!"); <br>} <br>else <br>y.hidden = true; <br>} <br>else if(str=="cpassword") <br>{ <br>var z = document.getElementById("password").value; <br>x = x.값; <br>if(x != z) <br>y.hidden = false; <br>else <br>y.hidden = true; <br>} <br>else if(str=="email") <br>{ <br>x = x.value.indexOf("@") <br>if(x == -1) <br> y.숨김 = 거짓; <br>else <br>y.hidden = true; <br>} <br>y.hidden을 반환합니다. <br>} <br><br>function verify() <br>{ <br>var arr=["name", "age", "weight", "password", "cpassword", "email"]; <br>var i = 0; <br>제출확인 = true; <br>while(i <= 5) <br>{ <br>if(!check(arr[i])) <br>{ <br>alert(arr[i] " 틀림!"); <br>제출확인 = false; <br>휴식; <br>} <br>나는 ; <br>} <br>if(submitOK) <br>{ <br>alert("提交成功！"); <br>참을 반환합니다. <br>} <br>else <br>{ <br>alert("提交失败"); <br>거짓을 반환합니다. <br>} <br>} <br><br>function load_greeting() <br>{ <br>//alert("visit n"); <br>} <br>
</div>
</td>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
