ホームページ > 記事 > ウェブフロントエンド > JavaScript がフォームの送信を妨げるコードを実装する方法の概要

JavaScript がフォームの送信を妨げるコードを実装する方法の概要

巴扎黑オリジナル: 2017-08-18 10:08:051748ブラウズ

この記事では、フォーム送信を阻止するための JavaScript メソッドを主に紹介し、フォーム送信を阻止する際の注意点や、onSubmit と check() の違いについてコード例を交えて説明しています。

<body>
 <form action="clock.html" method="post" onsubmit="return checkLength()">
  <p>name:<input type="text" name="user" id="user"></p>
  <input type="submit" id="submit" name="submit"> 
 </form>
</body>
</html>

html ページ。

最初の方法: イベントのデフォルトのイベントブロックメカニズムを使用し、ページがロードされた後に submit 要素を取得し、イベントイベントをパラメーターとして送信用のクリック応答関数を登録します。ユーザーが送信をクリックして応答関数をトリガーした後、直接、event.preventDefault(); によってデフォルトイベントがフォームジャンプから阻止されます。

2 番目の方法: onsubmit="return checkLength()" 属性の下に属性 checkLength()" を追加するか、form タグの下に id="submit" を持つ input タグを追加します function 関数内でフォーム送信のリターンを防止しますfalse;
関数内のコードが下向きに実行されるのを防ぎます return;

関数を呼び出す場合、

1.form

submit の 2 つのイベントがあります。直接送信する場合は、送信ボタンをクリックすると最初にフォーム

onSubmit がトリガーされ、制御されていない場合はデフォルトで true が返されるため、フォームは送信できます。 submit，提交表单，如果直接调用该函数，则直接提交表单
onSubmit，提交按钮点击时先触发，然后触发submit事件。如果不加控制的话，默认返回true，因此表单总能提交。

2. JS的校验

通过在JS中用document.myform.name.value

2. JS の検証各ユーザーの入力を取得して検証します。

4. JS実装

/*
<form name="testform" action="hello.html" method="post" onSubmit="return check();">
 <input type="text" name="name">
 <input type="submit" value="提交">
</form>
*/

に注意してください。

しないでくださいonSubmit を「check()」に書き込みます。この方法では、チェックが失敗した場合、フォームは送信されません。

以上がJavaScript がフォームの送信を妨げるコードを実装する方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScriptで更新せずにファイルをアップロードする方法の紹介次の記事：JavaScriptで更新せずにファイルをアップロードする方法の紹介

続きを見る