JavaScript 양식 유효성 검사

JavaScript를 사용하면 데이터가 서버로 전송되기 전에 HTML 양식에서 이러한 입력 데이터의 유효성을 검사할 수 있습니다.

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

양식 데이터가 비어 있는지 확인하시겠습니까?
입력한 이메일 주소가 맞는지 확인하셨나요?
날짜가 올바르게 입력되었는지 확인하셨나요?
양식 입력 내용이 숫자인지 확인하세요?

필수(또는 필수) 항목

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

<!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="" onsubmit="return validateForm()" method="post">
    姓: <input type="text" name="fname">
    <input type="submit" value="提交">
</form>
</body>
</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="" onsubmit="return validateForm();" method="post">
    Email: <input type="text" name="email">
    <input type="submit" value="提交">
</form>
</body>
</html>

프로그램을 실행하고 사용해 보세요

지속적인 학습

새로운 파일

<!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="" onsubmit="return validateForm()" method="post"> 姓: <input type="text" name="fname"> <input type="submit" value="提交"> </form> </body> </html>

제출하다 코드 재설정

자동운전