form表单的多种提交方式

时间：2021-12-25 20:52:51

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

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

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="" method="post" onsubmit="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" onsubmit="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" onsubmit="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" onsubmit="return checkForm()" id="subForm">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="password">
    <a onclick="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" onsubmit="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表单提交的一些总结，后期如果有新的经验总结会及时更新。

标签：

相关文章