JavaScript フォーム...LOGIN

JavaScript フォームの検証

JavaScript フォームの検証


JavaScript フォームの検証

JavaScript を使用すると、データがサーバーに送信される前に、HTML フォーム内のこれらの入力データを検証できます。

フォーム データは、その正確性を検証するために JavaScript を必要とすることがよくあります:

フォーム データが空かどうかを確認しますか?

入力したメールアドレスが正しいことを確認しますか?

日付が正しく入力されているか確認してください?

フォーム入力内容が数値かどうかを確認しますか?

必須(または必須)項目

次の関数は、ユーザーがフォームに必須(または必須)項目を入力したかどうかを確認するために使用されます。必須フィールドまたは必須フィールドが空の場合、警告ボックスがポップアップ表示され、関数の戻り値は false になります。それ以外の場合、関数の戻り値は true (データに問題がないことを意味します) になります。 validateForm()

{

var x =document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("姓は次のとおりですfully 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>

電子メール検証

次の関数は、入力されたデータが電子メールアドレスの基本的な構文。

これは、入力データには @ 記号とピリオド (.) が含まれている必要があることを意味します。同時に、@ を電子メール アドレスの最初の文字にすることはできず、@ の後に少なくとも 1 つのピリオドが必要です:

function validateForm(){

var x=document.forms["myForm"]["email" ].value;

var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos= 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>
コースウェア