form表单的多种提交方式

在项目开发中自己总结的form表单的集中提交方式：

1，<input type="submit"> 提交按钮提交表单。

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="" method="post" οnsubmit="return checkForm()">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="password">
    <input type="submit" value="提交">
</form>
<script>
    function checkForm(){var name=document.getElementById("name").value;
        if(name==""||name==null){return false;
        }var pwd=document.getElementById("password").value;
        if(pwd==""||pwd==null){return false;
        }return true;
    }
</script>
</body>
</html>

2，<input type="button"> 按钮提交表单，button也可以触发表单的提交。

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="" method="post" οnsubmit="return checkForm()">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="password">
    <input type="button" value="提交">
</form>
<script>
    function checkForm(){var name=document.getElementById("name").value;
        if(name==""||name==null){return false;
        }var pwd=document.getElementById("password").value;
        if(pwd==""||pwd==null){return false;
        }return true;
    }
</script>
</body>
</html>

3，<input type="image" src=""> 图片提交表单，将input的属性设置为image时，点击图片也可触发form表单的提交。

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="" method="post" οnsubmit="return checkForm()">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="password">
    <input type="image" src="img/1a72xa0atv.jpg">
</form>
<script>
    function checkForm(){var name=document.getElementById("name").value;
        if(name==""||name==null){return false;
        }var pwd=document.getElementById("password").value;
        if(pwd==""||pwd==null){return false;
        }return true;
    }
</script>
</body>
</html>

4，利用js提交表单，将form表单中进行标记，将表单中的某一元素设置点击事件，点击时调用js函数，再用js如$("#id").submit();等方法提交表单。

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="" method="post" οnsubmit="return checkForm()" id="subForm">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="password">
    <a οnclick="subForm()">提交</a>
</form>
<script>
    function checkForm(){var name=document.getElementById("name").value;
        if(name==""||name==null){return false;
        }var pwd=document.getElementById("password").value;
        if(pwd==""||pwd==null){return false;
        }return true;

    }function subForm(){document.getElementById("subForm").submit();
    }
</script>
</body>
</html>

5，提交表单之前验证表单内容：用onSubmit="return checkForm()"即可在form表单提交之前先执行checkForm函数，在函数里判断表单内容是否符合条件，并返回相应的值。若函数返回true，则提交表单，否则不提交表单。

例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="" method="post" οnsubmit="return checkForm()">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="password">
    <input type="submit" value="提交">
</form>
<script>
    function checkForm(){var name=document.getElementById("name").value;
        if(name==""||name==null){return false;
        }var pwd=document.getElementById("password").value;
        if(pwd==""||pwd==null){return false;
        }return true;
    }
</script>
</body>
</html>

以上是我本人在项目开发中关于form表单提交的一些总结，后期如果有新的经验总结会及时更新。

form表单的多种提交方式相关推荐

form表单的多种提交方式及提交前验证
以下是本人总结处来的一些form的提交方式,网上还有别的提交方式,这里我总结了大小分为7类,其实就是三类的提交方式,若有哪里不对的,还请评论指出来,大家一起学习学习 1.无任何验证提交(最普通的提交) ...
form表单的各种提交方式
form表单提交方法很多.直接提交啊,或者js提交啊. 第一种提交方式:form表单直接提交 <form action="formDate" method="pos ...
form表单—2种提交方式
只提交参数到后台,不接收返回值 html代码  <form id="editForm" action=&qu ...
form表单用butten提交后无反应表单提交三种方式
form表单用butten提交后无反应&表单提交三种方式一,表单提交无反应有时候,我们发现表单提交的butten按钮,根本就没niao用.鼠标都点烂了,也提交不上去.找了半天什么错误也没找 ...
uni-app.02.提交form表单的两种方式
提交form表单的两种方式 uni-app提交form表单的两种方式 form表单元素较少前端代码举例后端代码举例 form表单元素较多前端代码举例: 后端java代码举例 uni-app提交f ...
php阻止form提交表单提交,防止表单提交时刷新页面-阻止form表单的默认提交行为...
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
php表单转json对象,form表单转Json提交的方法(推荐)
form表单转Json提交的方法(推荐) 先将表单数值转换成数组存储,存储成的格式为[{"name":"","value":"&q ...
Form表单之get提交与post提交
Form表单之get提交与post提交 Form表单的属性action 与method: 属性值 ...
jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

form表单的多种提交方式

form表单的多种提交方式相关推荐

最新文章

热门文章