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>

다음 미리보기 렌더링을 살펴보겠습니다.

布局_1.png

페이지 스타일을 처리하기 전에 , 먼저 코드를 살펴보세요

모든 텍스트 상자나 텍스트 필드 아래에 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>

코드 재설정

자동운전

제출하다

시사 Clear