자바 스크립트를 사용하여 이메일을 실시간으로 확인하고 텍스트 상자 배경색을 변경하는 방법
비트 코인 배런
내 자바 코드 :
<script type='text/javascript'>
$(document).ready(function () {
$('#email').keyup(function() {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test($(this).val())) {
$(this).css("background-color", "green");
} else {
$(this).css("background-color", "red");
}
});
});
</script>
내 HTML :
<p><b>Email Address:</b> <input type="text" name="email_address" id="email" /> </p>
클릭 어웨이 효과가 아닌 사용자가 입력 할 때 라이브 업데이트 유형의 효과를 찾고 있습니다.
아무것도 작동하지 않는 것 같습니다. 유사한 코드를 사용하여 라이브 패션에서 다른 텍스트 상자의 값을 변경했습니다. 반복되는 질문이라면 죄송합니다.
감사합니다!
StockBreak
귀하의 예는 내 컴퓨터에서 잘 작동합니다.
jQuery를 포함 시켰습니까? 어떤 버전? 어떤 브라우저를 사용하고 있습니까?
이것은 내 작업 코드입니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script type='text/javascript'>
$(document).ready(function () {
$('#email').keyup(function () {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test($(this).val())) {
$(this).css("background-color", "green");
} else {
$(this).css("background-color", "red");
}
});
});
</script>
<p><b>Email Address:</b>
<input type="text" name="email_address" id="email" />
</p>
</body>
</html>
그리고 이것이 그 결과입니다.
편집 : 쉬운 클라이언트 유효성 검사 라이브러리를 원한다면 jQuery 유효성 검사 를 사용하는 것이 좋습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
몇 마디 만하겠습니다