JS 개발 검증 양식 튜토리얼 프런트엔드 레이아웃
Validation form
js를 사용하여 양식을 검증하는 방법을 알아봅시다
html 코드는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div"> <form> <label>用户名:</label> <input type="text" class="name" id="name"> <div id="sp" class="div"></div> <label>密 码:</label> <input type="password" class="pwd" id="pwd"> <div id="sp1" class="div"></div> <label>邮 箱:</label> <input type="text" class="email" id="email"> <div id="sp2" class="div"></div> <label>爱 好:</label> <textarea rows="5" cols="30" class="txt" id="txt"></textarea> <div id="sp3" class="div"></div> <input type="button" class="sub" value="注册" id="sub"> </form> </div> </body> </html>
다음 미리보기 렌더링을 살펴보겠습니다.
페이지 스타일을 처리하기 전에 , 먼저 코드를 살펴보세요
모든 텍스트 상자나 텍스트 필드 아래에 div 태그가 있습니다. 이것은 무엇을 위해 사용됩니까? 자바스크립트를 사용하여 양식을 확인할 때 입력 내용이 없으면 프롬프트 메시지가 표시됩니다. , 그리고 div 태그에 프롬프트 정보의 내용을 넣습니다
위 코드에서 id 및 class 속성을 보았으며 이를 사용하여 스타일을 생성할 수 있습니다.
이것은 CSS를 사용하여 스타일을 처리하지 않으므로 표시됩니다. 보기 흉합니다. 다음에는 CSS를 사용하여 스타일을 변경하겠습니다
다음 섹션<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<form>
<label>用户名:</label>
<input type="text" class="name" id="name">
<div id="sp" class="div"></div>
<label>密 码:</label>
<input type="password" class="pwd" id="pwd">
<div id="sp1" class="div"></div>
<label>邮 箱:</label>
<input type="text" class="email" id="email">
<div id="sp2" class="div"></div>
<label>爱 好:</label>
<textarea rows="5" cols="30" class="txt" id="txt"></textarea>
<div id="sp3" class="div"></div>
<input type="button" class="sub" value="注册" id="sub">
</form>
</div>
</body>
</html>
