JavaScript 양식 유효성 검사


JavaScript를 사용하면 데이터가 서버로 전송되기 전에 HTML 형식의 입력 데이터를 확인할 수 있습니다.

양식 데이터의 정확성을 확인하려면 JavaScript가 필요한 경우가 많습니다.


  • 양식 데이터가 비어 있는지 확인하시겠습니까?


  • 입력한 이메일 주소가 올바른지 확인하시겠습니까?


  • 확인날짜가 올바르게 입력되었나요?


  • 양식 입력 내용이 숫자인지 확인하시겠어요?


필수(또는 필수) 항목

다음 기능은 사용자가 필수(또는 필수) 항목을 입력했는지 확인하는 데 사용됩니다. Select) 프로젝트 형식으로. 필수이거나 필수 필드가 비어 있으면 경고 상자가 나타나고 함수의 반환 값은 false입니다. 그렇지 않으면 함수의 반환 값이 true입니다(데이터에 문제가 없음을 의미): 

function validateForm()
{
	var x=document.forms["myForm"]["fname"].value;
	if (x==null || x=="")
	{
		alert("姓必须填写");
		return false;
	}
}

위 함수는 양식이 제출될 때 호출되는 형식입니다:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
	
</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

이메일 유효성 검사

다음 함수는 입력된 데이터가 인스턴스의 기본 구문을 준수하는지 확인합니다. 이메일 주소.

입력 데이터에 @ 기호와 마침표(.)가 포함되어야 함을 의미합니다. 동시에 @는 이메일 주소의 첫 번째 문자가 될 수 없으며 @ 뒤에 마침표가 하나 이상 있어야 합니다. 

function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
		return false;
	}
}

다음은 HTML 형식과 함께 전체 코드입니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
  		return false;
	}
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
	
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요