JavaScript 양식 유효성 검사

JavaScript 양식 유효성 검사

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

양식 데이터의 정확성을 확인하려면 종종 JavaScript가 필요합니다.

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

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

날짜가 제대로 입력되었는지 확인하셨나요?

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

필수(또는 필수) 항목

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

함수 verifyForm()
{
var x =document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
Alert("성은 다음과 같아야 합니다. filled in");
return false;
}
}

위 함수는 양식이 제출될 때 호출됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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>

이메일 확인

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

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

function verifyForm(){
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("유효한 이메일 주소가 아닙니다");
return false;
}
}

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表单验证</title> <script type="text/javascript"> //校验输入 function checkInput(){ var flag=false; var username=$("username").value; var pwd=$("pwd").value; var repwd=$("repwd").value; var email=$("email").value; if(username==""){ alert("用户名不能为空！"); }else if(pwd==""){ alert("密码不能为空！"); }else if(pwd.length<6){ alert("密码必须大于6位"); }else if(pwd!=repwd){ alert("密码不一致！"); }else if(email.indexOf("@")==-1 ||email.indexOf(".")==-1){ alert("邮箱格式不正确！"); }else{ flag=true; } //限定用户名不能包含数字 for(var i=0;i<username.length;i++){ var s=username.substring(i,i+1); if(!isNaN(s)){ alert("用户名不能包含数字！") return false; } } return flag; } //获取焦点时清除原内容 function clearUsername(){ var username=$("username"); username.style.border="1px solid #f00"; if(username.value=="请输入正确的用户名"){ username.value=""; } } //失去焦点时检验用户名 function checkUsername(username){ username.style.border=""; if(username.value==""){ $("usernameinfo").style.font="normal 15px 宋体"; $("usernameinfo").style.color="#f00"; $("usernameinfo").innerHTML="用户名不能为空"; username.focus(); }else if(username.value.length>14||username.value.length<6){ $("usernameinfo").style.font="normal 15px 宋体"; $("usernameinfo").style.color="#F00"; $("usernameinfo").innerHTML="用户名长度必须在6-14之间！"; //username.select();//此代码在IE和Chrome中好使，在Firefox中不好使 //匿名函数 setTimeout(function(){username.select();},0); }else{ $("usernameinfo").innerHTML=""; } } function $(id){ return document.getElementById(id); } </script> </head> <body> <form action="success.html" method="post" onsubmit="return checkInput();"> <table border="0" cellpadding="0" cellspacing="0" width="600px"> <tr> <td align="right">用户名：</td> <td><input type="text" name="userbname" id="username" value="请输入正确的用户名" onfocus="clearUsername()" onblur="checkUsername(this)"/><span id="usernameinfo"></span></td> </tr> <tr> <td align="right">密码：</td> <td><input type="password" name="pwd" id="pwd"/></td> </tr> <tr> <td align="right">确认密码：</td> <td><input type="password" name="repwd" id="repwd"/></td> </tr> <tr> <td align="right">电子邮箱：</td> <td><input type="text" name="email" id="email"/><br/></td> </tr> <tr> <td></td> <td> <input type="submit" value="注册"/> <input type="reset" value="重置"/></td> </tr> </table> </form> </body> </html>

제출하다 코드 재설정

자동운전