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

一.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表单提交方式的区别

你可能感兴趣的:(前端开发,前端,javascript,开发语言,jquery,后端)