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

一.form表单简介表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框、提交按钮等，这些输入框、按钮叫做控件,表单就像容器,它能够容纳各种各样的控件。表单标签的格式:< form action＝"url" method="get|post" name=“myform” >< /form >参数说明：action：提交到的地址（后台地址）name：表单提交时的

亚东同学

5818人浏览 · 2022-01-25 18:13:43

亚东同学 · 2022-01-25 18:13:43 发布

一.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>