ホームページ > 記事 > ウェブフロントエンド > javascript_javascript スキルに実装された単純なフォーム検証
javascript_javascript スキルに実装された単純なフォーム検証
- WBOYオリジナル
- 2016-05-16 15:50:47967ブラウズ
フォーム検証は、バックグラウンドで完了するものもあれば、フロントエンドで基本的な検証を完了するために 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を追加するのを忘れてください。
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。