【前端】实现form表单中提交按钮为submit类型时，进行判断后才提交跳转

2024年6月4日 270次阅读 来源: 亚东同学

一.form表单简介

表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框、提交按钮等，这些输入框、按钮叫做控件,表单就像容器,它能够容纳各种各样的控件。
表单标签的格式:

< form action＝"url" method="get|post" name=“myform” >< /form >

参数说明：
action：提交到的地址（后台地址）
name：表单提交时的名称
method：提交方式，默认为get
post和get区别：
数据提交方式，get–提交的数据url可以看到，post看不到；
get一般用于提交少量数据，post用来提交大量数据，get最多提交2kb数据，post理论上没有限制。
get提交的数据在浏览器历史记录中，安全性不好；也就是说用post安全性更高。

二.测试代码

前后端交互一般更多的是用ajax传数据，这里我们用form表单对于按钮为submit类型时进行测试。
目的是进行完判断输入框为空（或者其他判断–可以在测试代码中定义的checked函数里写上对应判断语句）再提交到后台（后台地址对应写在action里面）。
主要利用form 表单的onsubmit事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form 表单</title>
</head>
<body>
<form action="www.baidu.com" method="post" onsubmit="return checked()" >
            <label class='lab' for="exam">测试：</label>
            <input type="text" class="form-control " id="exam" >
            <button type="submit" class="btn btn-info btn-search" id="submit">提交</button> 
    </form>

<script src="jquery-1.10.2.js"></script>
<script type="text/javascript"> function checked() {  var exam = $('#exam').val(); if (exam == ""){  alert('请输入数据！') return false; } else{  return true; } } </script>
</html>

三.附注

参考学习：1.form表单详解
2.菜鸟教程
3.form和ajax表单提交方式的区别

    原文作者：亚东同学
    原文地址: https://blog.csdn.net/rensheng2020/article/details/122689756
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞