페이지 스타일 코드: 코드 복사 코드는 다음과 같습니다. <br>.header <br>{ <br>배경색: #CCCCCC <br>글꼴 크기: x-large; >.content <br>{ <br>배경색: 흰색 <br>글꼴 크기: 더 가벼움; <br>} <br>.content td <br>{ <br>text- 정렬: 왼쪽; <br>} <br>.mandatory <br>{ <br>색상: 빨간색; <br>} <br>.errorContainer <br>{ <br>표시: 없음 <br> 여백-하단: 20px; <br>} <br>.alertMsg <br>{ <br>여백-왼쪽: 20px; <br>색상: #660000; <br>.input-highlight <br> { <br>배경색: #CCCCCC; <br>} <br> 페이지 구조 코드: 코드 복사 코드는 다음과 같습니다. 여기에 몇 가지 오류 등록 메시지가 있습니다. 메시지가 표시됩니다. 등록 정보 형식이 올바른지 확인하세요. 등록된 사용자 사용자 이름* 이메일< 스팬 클래스= "필수">* 비밀번호 < /span> 비밀번호 확인*< 범위> 🎜 > 생일* > > 주소 1* > > 주소 2 우편번호 🎜> 🎜> 관련 법률 조항에 동의합니다 Text="Reset" runat="server" /> /tr> 스크립트 코드: 먼저 스크립트 파일을 소개합니다: 코드 복사 코드는 다음과 같습니다. > 스크립트 함수 코드: 코드 복사 코드는 다음과 같습니다. <br>$(document).ready(function () { <br>// 여기에서 기본 작업 동작을 설정하세요<br>$.validator . setDefaults({ <br>하이라이트: 함수(입력) { <br>$(input).addClass("input-highlight"); <br>}, <br>하이라이트 해제: 함수(입력) { <br>$ ( input).removeClass("input-highlight"); <br>} <br>}); <br><br>// 그런 다음 verify() 함수를 호출하여 양식 확인을 시작합니다. <br>$("#form1 ").validate({ <br>rules: { txtName: "required", <br>// 이메일 형식이 올바른지 확인하고 이메일 속성을 true로 설정합니다. <br>txtEmail: { 필수: true, 이메일: true }, <br>txtPassword: { 필수: true, 최소 길이: 8 }, <br>// 여기서 equalTo 속성의 기능은 확인 비밀번호가 이전에 입력한 비밀번호와 동일해야 하는지 확인하는 것입니다. <br>txtConfirmPwd: { 필수: true, 최소 길이: 8, 동등: "#txtPassword" }, <br>// 날짜 형식이 올바른지 확인하고 날짜 속성을 true로 설정합니다. <br>txtDOB: { 필수: true, 날짜: true } , <br>// maxlength 속성을 통해 텍스트 설정 최대 길이 <br>txtAddress1: { 필수: true, maxlength: 200 }, <br>txtAddress2: { maxlength: 200 }, <br>// 입력 내용 숫자 속성 설정은 숫자여야 합니다 <br>txtPostal: { 필수: true, 숫자: true }, <br>// url 속성은 입력이 합법적인 URL인지 확인합니다 <br>txtWebsite: { url: true }, <br>chkTandC: "필수" <br>}, <br>messages: { txtName: "이름을 입력하세요.", <br>txtEmail: { 필수: "이메일을 입력하세요.", <br>email: "이름을 입력하세요. 법적 이메일 주소" <br>}, <br>txtPassword : { 필수: "비밀번호를 입력하세요.", <br>minlength: "비밀번호 길이는 8보다 커야 합니다." <br>}, <br>txtConfirmPwd: { 필수: "확인 비밀번호를 입력하세요.", <br>minlength : "확인된 비밀번호의 길이는 8자 이상이어야 합니다.", <br>equalTo: "입력한 비밀번호와 확인된 비밀번호가 동일한지 확인하세요." <br>}, <br>txtDOB: { 필수: "생일을 입력하세요.", <br>date: "입력한 생일 날짜 형식이 잘못되었습니다." <br>}, <br>txtAddress1: { 필수: " 주소 1을 입력하세요.", <br>maxlength: "입력한 주소 1의 길이는 200을 초과할 수 없습니다." <br>}, <br>txtAddress2: { maxlength: "입력한 주소 1의 길이는 200을 초과할 수 없습니다. " }, <br>txtPostal: { 필수: "우편번호를 입력하세요.", <br>digits: "입력하는 우편번호는 모두 숫자여야 합니다." <br>}, <br>txtWebsite: { url: "제발 법적 URL을 입력하세요." }, <br>chkTandC: { 필수: "관련 법률 조건에 동의하세요." } <br>}, <br>wrapper: "li", <br>errorContainer: $("div.errorContainer" ), <br>errorLabelContainer: $("#form1 p.alertMsg") <br>}); <br><br>$("#btnReset").click(function (e) { <br>e.preventDefault (); <br>// 여기서는 플러그인 양식의 ResetForm() 함수를 사용하여 페이지 로드 상태를 처음으로 복원합니다. <br>$("#form1").resetForm(); }); <br>}); <br> 참고: 첫 번째는 모든 div를 선택하는 것입니다. 스타일 클래스 errorContainer가 있는 요소와 두 번째 요소는 스타일 클래스 errorContainer가 있는 div 요소의 모든 하위 요소를 선택하는 것입니다. 최종 렌더링:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
