jQuery 개발 로그인 튜토리얼 jquery 검증

첫 번째 섹션에서는 jquery를 사용하여 양식 검증을 개발하는 단계, 즉 흐름도, 페이지 레이아웃 및 CSS를 모두 완료했습니다.

다음 단계는 jquery 파일을 소개하고 작성하는 것입니다. jquery code

< ;script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

참고: jquery.js 파일이 다른 경우 form.html 파일에서 같은 디렉터리에 없으면 올바른 경로를 작성해야 합니다

아래에서 양식의 사용자 이름과 비밀번호를 확인해야 합니다

그렇다면. 채워지지 않은 경우 로그인을 클릭합니다. 따라서 프롬프트 메시지가 표시됩니다.

<script>
        $("#but").click(function(){
             if($("#name").val()==""){
                 $("#sp1").html("请输入用户名");
             }else{
                 $("#sp1").html("");
             }
             if($("#pwd").val()==""){
                 $("#sp2").html("请输入密码");
             }else{
                 $("#sp2").html("");
             }
        })
</script>

위 코드를 보면 사용자 이름 텍스트 상자의 내용을 가져옵니다. 비어 있지 않으면 스팬 내용에 내용이 없습니다.

내용을 입력하지 않고 로그인하기 위해 버튼을 클릭하면 내용을 입력할 때 스팬 태그에도 프롬프트 메시지가 표시됩니다. 텍스트 상자에서 입력이 완료된 후 페이지의 다른 곳을 클릭하면 스팬 태그 프롬프트 텍스트가 표시되지 않습니다

This 변경 이벤트를 트리거했을 때 코드는 다음과 같습니다.

  <script>
    $("input").change(function(){
            if($("#name").val()==""){
                 $("#sp1").html("请输入用户名");
             }else{
                 $("#sp1").html("");
             }
              if($("#pwd").val()==""){
                 $("#sp2").html("请输入密码");
             }else{
                 $("#sp2").html("");
             }
        })
    </script>

이 시점에서 우리는 로그인 페이지 간편인증이 완료되었습니다

전체 코드는 아래에 올려드리겠습니다

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录页面的验证</title>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        #bdy{width:100%;height:950px;background:#999;}
        #dv{position:absolute; top:40px;left:20px;width:300px;height:250px;background:#f44;}
        #con{width:300px;height:200px;margin-left:35px;margin-top:35px;font-family:"隶书";font-size:18px;}
        #but{width:230px;height:30px;margin-top:15px;border:1px solid #ccc;background:#f60;font-family:"隶书";
            font-size:18px;}
        #but:hover{background:#f66;}
        span{margin-left:80px;}
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div id="bdy">
        <div id="dv">
            <div id="con">
                <form method="post" action="#">
                    用户名：<input type="text" placeholder="请输入用户名" id="name"></br>
                    <span id="sp1"></span></br></br>
                    密  码：<input type="password" placeholder="请输入密码" id="pwd"></br>
                    <span id="sp2"></span></br></br>
                    <input type="button" value="登 录" id="but">
                </form>
            </div>
        </div>
    </div>
     <script>
        $("#but").click(function(){
             if($("#name").val()==""){
                 $("#sp1").html("请输入用户名");
             }else{
                 $("#sp1").html("");
             }
             if($("#pwd").val()==""){
                 $("#sp2").html("请输入密码");
             }else{
                 $("#sp2").html("");
             }
        })
        $("input").change(function(){
            if($("#name").val()==""){
                 $("#sp1").html("请输入用户名");
             }else{
                 $("#sp1").html("");
             }
              if($("#pwd").val()==""){
                 $("#sp2").html("请输入密码");
             }else{
                 $("#sp2").html("");
             }
        })
    </script>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录页面的验证</title> <style type="text/css"> *{margin:0px;padding:0px;} #bdy{width:100%;height:950px;background:#999;} #dv{position:absolute; top:40px;left:20px;width:300px;height:250px;background:#f44;} #con{width:300px;height:200px;margin-left:35px;margin-top:35px;font-family:"隶书";font-size:18px;} #but{width:230px;height:30px;margin-top:15px;border:1px solid #ccc;background:#f60;font-family:"隶书"; font-size:18px;} #but:hover{background:#f66;} span{margin-left:80px;} </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div id="bdy"> <div id="dv"> <div id="con"> <form method="post" action="#"> 用户名：<input type="text" placeholder="请输入用户名" id="name"></br> <span id="sp1"></span></br></br> 密码：<input type="password" placeholder="请输入密码" id="pwd"></br> <span id="sp2"></span></br></br> <input type="button" value="登录" id="but"> </form> </div> </div> </div> <script> $("#but").click(function(){ if($("#name").val()==""){ $("#sp1").html("请输入用户名"); }else{ $("#sp1").html(""); } if($("#pwd").val()==""){ $("#sp2").html("请输入密码"); }else{ $("#sp2").html(""); } }) $("input").change(function(){ if($("#name").val()==""){ $("#sp1").html("请输入用户名"); }else{ $("#sp1").html(""); } if($("#pwd").val()==""){ $("#sp2").html("请输入密码"); }else{ $("#sp2").html(""); } }) </script> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear