ホームページ > 記事 > ウェブフロントエンド > JSを使用したフォーム送信のいくつかの方法と検証
JSを使用したフォーム送信のいくつかの方法と検証
- 高洛峰オリジナル
- 2016-12-16 15:16:231332ブラウズ
仕事で便利なフォーム送信の問題を発見しました。IE では送信できますが、Firefox では送信ボタンを使用すると問題が発生するため、JS を使用する方法は成功します。講師の勧めで、フォーム送信の一般的な方法を以下にまとめました。
最初の方法: フォーム送信。フォームタグに onsubmit イベントを追加して、フォーム送信が成功したかどうかを判断します
<script type="text/javascript">
function validate(obj) {
if (confirm("提交表单?")) {
alert(obj.value);
return true;
} else {
alert(obj.value);
return false;
}
}
</script>
<body>
<form action="http://www.php.cn" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—参数的这种写法注意下-->
<input type="text" id="myText"/>
<input type="submit" value="submit"/>
</form>
</body>2 つ目の方法: ボタンボタン onclick="submitForm();" を通じてフォーム送信イベントをトリガーします。これは無視されます。他のタグの属性を削除します。たとえば、form タグの onsubmit 属性は無効になります。このとき、フォーム検証を実行するには、検証用の submitForm() メソッドに検証コードを配置します。
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
function submitForm() {
if (validate()) {
document.getElementByIdx_x("myForm").submit();
}
}
</script>
<body>
<form action="http://www.php.cn" id="myForm">
<input type="text"/>
<input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
</form>
</body>3 番目の方法: form タグの代わりに submit タグに onsubmit イベントを配置します。 この時点で、送信ボタンをクリックすると、フォームが直接送信されます。
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="http://www.php.cn">
<input type="text"/>
<input type="submit" value="submit" onsubmit="return validate()"/>
</form>
</body>4 番目の方法: onclick を追加します。イベントを送信ボタンに追加します。このイベントはフォーム送信の検証に使用されます。この機能は、フォーム タグに onsubmit イベントを追加するのと似ています。
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="http://www.php.cn">
<input type="text"/>
<input type="submit" value="submit" onclick="return validate()"/>
</form>
</body>ボタン ボタンを通じてフォーム送信イベントをトリガーします。 onclick="submitForm();" は、他のタグの属性を無視します。たとえば、form タグの onsubmit 属性は無効になります。このとき、フォーム検証を実行するには、submitForm() メソッドに検証コードを配置して検証することができます
<body>
<form action="http://www.php.cn" id="myForm">
<input type="text"/>
<input type="button" value="submitBtn" id="myBtn"/>
</form>
</body>
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
JS を使用してフォームを送信するその他の方法と検証関連の記事については、こちらをご覧ください。 PHP中国語ウェブサイトです！