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

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

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

この記事では、フォーム送信を阻止するための 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 までご連絡ください。