Jquery 폼 유효성 검사

Question

현재 내 병합 문제가 있습니다. 페이지 구분 입력 확인 하나의 웹 페이지에. , 어떤 생각 여기 내 시도하지만 늘 기능을 모두 부르는 이유

JQuery와 :

<script> 
function isValidPassword(Passwordreg){ 
    var pattern = new RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/); 
    return pattern.test(Passwordreg); 
}; 
function isValidEmailAddress(emailAddress) { 
    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i); 
    return pattern.test(emailAddress); 
}; 
    $(document).ready(function(){ 
     $("#email").focus(); 
     $("#email").blur(function() { 
     checkEmail($("#email").val()); 
     }); 
     $("#email").keydown(function() { 
      checkEmail($("#email").val()); 
     $("#Password").blur(function() { 
      checkPassword($("#Password").val()); 
     }); 
     $("#Password").keydown(function() { 
      checkPassword($("#Password").val()); 
    }); 

function checkPassword(Pword){ 
    if(!isValidPassword($("#Password").val())){ 
     $("#passwordError").html("Does Not Match the Reqirements"); 
     $("#emailError").addClass("error"); 
     $('input[type="submit"]').prop('disabled', true); 
     return false; 
    }else{ 
     $("#passwordError").html(""); 
     $("#Password").removeClass("error"); 
     $('input[type="submit"]').prop('disabled', false); 
     return true; 
    } 

} 
function checkEmail(emailAddie){ 
    if(!isValidEmailAddress($("#email").val())){ 
     $("#emailError").html("Please inert a correctly layed out email address"); 
     $("#email").addClass("error"); 
     $('input[type="submit"]').prop('disabled', true); 
     return false; 
    }else{ 
     $("#emailError").html(""); 
     $("#email").removeClass("error"); 
     $('input[type="submit"]').prop('disabled', false); 
     return true; 
    } 

} 
$("#submitB").click(function(e) { 
     if(!checkPassword($("#Password").val())){ 
      e.preventDefault(); 
     } 
    }); 
}); 
</script> 

그리고 내 양식 그것에 6 개 입력을 가지고 있지만 우리는 단지 2

에 초점을 맞출 필요가 내가-설정 한 트리거와 함께 개별적으로 전화를하려고하면

<form> 
     <label for="email">Username/Email address</label> 
     <input id="email" type="text" name="email" ><span id="emailError"></span> 
     <label for="Password">Password</label> 
     <input id="Password" type="password" name="Password" ><span id="passwordError"></span> 
</form> 

는 다시 이러한 기능이 작동하지만 한 번

Answer 1

당신의 시간에서 두 입력을 모니터링 할 때 그들은 실패 귀하의 코드에서 구문 오류가 발생했습니다. 그래서 그것은 당신을 위해 일하지 않습니다.

여기 고정 코드가 있습니다.

function isValidPassword(Passwordreg){ 
 
    var pattern = new RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/); 
 
    return pattern.test(Passwordreg); 
 
}; 
 
function isValidEmailAddress(emailAddress) { 
 
    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i); 
 
    return pattern.test(emailAddress); 
 
}; 
 
    $(document).ready(function(){ 
 
     $("#email").focus(); 
 
     $("#email").blur(function() { 
 
     checkEmail($("#email").val()); 
 
     }); 
 
     $("#email").keydown(function() { 
 
      checkEmail($("#email").val()); 
 
     $("#Password").blur(function() { 
 
      checkPassword($("#Password").val()); 
 
     }); 
 
     $("#Password").keydown(function() { 
 
      checkPassword($("#Password").val()); 
 
     }); 
 
     }); 
 

 
function checkPassword(Pword){ 
 
    if(!isValidPassword($("#Password").val())){ 
 
     $("#passwordError").html("Does Not Match the Reqirements"); 
 
     $("#emailError").addClass("error"); 
 
     $('input[type="submit"]').prop('disabled', true); 
 
     return false; 
 
    }else{ 
 
     $("#passwordError").html(""); 
 
     $("#Password").removeClass("error"); 
 
     $('input[type="submit"]').prop('disabled', false); 
 
     return true; 
 
    } 
 

 
} 
 
function checkEmail(emailAddie){ 
 
    if(!isValidEmailAddress($("#email").val())){ 
 
     $("#emailError").html("Please inert a correctly layed out email address"); 
 
     $("#email").addClass("error"); 
 
     $('input[type="submit"]').prop('disabled', true); 
 
     return false; 
 
    }else{ 
 
     $("#emailError").html(""); 
 
     $("#email").removeClass("error"); 
 
     $('input[type="submit"]').prop('disabled', false); 
 
     return true; 
 
    } 
 

 
} 
 
$("#submitB").click(function(e) { 
 
     if(!checkPassword($("#Password").val())){ 
 
      e.preventDefault(); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <form> 
 
     <label for="email">Username/Email address</label> 
 
     <input id="email" type="text" name="email" ><span id="emailError"></span> 
 
     <label for="Password">Password</label> 
 
     <input id="Password" type="password" name="Password" ><span id="passwordError"></span> 
 
</form> 
 
    <!-- Put your html here! --> 
 
    </body> 
 

 
</html>

Here is a plunker