이메일 텍스트 상자를 확인했습니다. 처음 초점을 맞추는 동안 텍스트 상자 테두리의 테두리는 녹색이됩니다. 유효하지 않은 메일 ID를 입력하면 올바른 메일 ID를 입력하도록 사용자에게 경고합니다. 이제 커서가 텍스트 상자에 초점을 맞출 것입니다. 이번에는 텍스트 상자 테두리가 빨간색이고 테두리 너비가 3px 여야합니다. 올바른 유효한 ID를 입력하면 테두리가 사라집니다.
이것은 내 코드입니다
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">
function Validate() {
var str=document.forms["register"]["requiredEMAIL"].value;
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
if (!filter.test(str))
{
alert("Please input a valid email address!");
document.forms["register"]["requiredEMAIL"].focus();
return false;
}
}
</script>
<style>
#mail{
font-size:14px;
min-width:250px;
border-width:2px;
border-color:#cccccc;
border-style:solid;
padding:5px;
border-radius:5px;
box-shadow: 1px 0px 13px 0px rgba(42,42,42,.24); }
#mail:focus{border-color:#63C6AE; border-width:3px; }
</style>
</head>
<body>
<form method="post" action="abcd.abc.abc" onSubmit="return Validate(this)" name="register">
<input type="email" name="requiredEMAIL" id="mail" >
<input type="submit">
</form>
</body>
</html>
CSS 클래스 추가 및 제거,
<script type="text/javascript">
$("#addClass").click(function () {
$('#para1').addClass('highlight');
});
$("#removeClass").click(function () {
$('#para1').removeClass('highlight');
});
</script>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다