javascript_javascript スキルに実装された単純なフォーム検証-jsチュートリアル-php.cn

javascript_javascript スキルに実装された単純なフォーム検証

WBOY

リリース： 2016-05-16 15:50:47

オリジナル

1038 人が閲覧しました

フォーム検証は、バックグラウンドで完了するものもあれば、フロントエンドで基本的な検証を完了するために JavaScript を使用するものもあります。ここでは、JS 実装について説明します。最も単純なフォーム検証。コード例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>脚本之家</title>
<script type="text/javascript"> 
function chkform(){ 
 if(document.getElementById("username").value==""){ 
  alert("用户名不能为空！"); 
  return false; 
 } 
 if(document.getElementById("pw").value=="") { 
  alert("密码不能为空！"); 
  return false; 
 } 
} 
</script> 
</head> 
<body> 
<form action="" name="myform"> 
 <table> 
  <tr> 
   <td>用户名:</td> 
   <td><input type="text" name="username" id="username" /></td> 
  </tr> 
  <tr> 
   <td>密码:</td> 
   <td><input type="password" name="pw" id="pw" /></td> 
  </tr> 
  <tr> 
   <td colspan="2"><input type="submit" value="提交"></td> 
  </tr> 
 </table> 
</form> 
</body> 
</html>

ログイン後にコピー

上記のコードは、最も基本的なフォーム検証を実装しています。つまり、フォームのコンテンツを空にすることはできません。その実装プロセスを簡単に紹介します。

1. JavaScript コードで、フォームを検証する chkform() 関数を作成します。

関数について簡単に説明します。

document.getElementById("username").value

ログイン後にコピー

上記のコードは、id username を持つオブジェクトの値を取得し、if ステートメントを使用して値が空であるかどうかを判断します。このステートメントは非常に重要です。そうでない場合、フォームは次のようになります。フォームの内容が空であっても、検証効果は得られません。2 番目の if 判定ステートメントについても同様です。これについてはここでは紹介しません。

2.onclick="return chkform()"、このステートメントの機能は、送信ボタンがクリックされたときに chkform() 関数が実行されてフォームを検証することです。ここでは特に強調してありません。 returnを追加するのを忘れてください。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。