提交表单数据

最新推荐文章于 2024-04-07 07:47:30 发布

万事胜意sy

最新推荐文章于 2024-04-07 07:47:30 发布

阅读量452

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： js

本文链接：https://blog.youkuaiyun.com/weixin_50736511/article/details/123767857

笔记专栏收录该内容

469 篇文章

订阅专栏

本文介绍了两种常见的表单提交方法：直接使用form标签提交和通过onsubmit事件验证后提交。第一种方法简单直接，在form标签中定义提交地址和方式即可完成提交。第二种方法更灵活，可以在提交前进行必要的数据验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种

在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮<input type=’submit’> 就可以进行数据的提交，每一个input标签都需要有一个name属性，才能进行提交

<form action=’http://www.123.com/postValue’ method=’post’>

<input type=’text’ name=’username’ />

<input type=’password’ name=’password’/>

<input type=’submit’ value=’登陆'/>

</form>

当点击登陆时，向服务端发生的数据是：username=username&password=password.

这种默认的提交方式，一般会进行页面的跳转(不成功时跳转到当前页面)。而有时候我们是对弹出框进行数据提交的，希望提交成功则关闭弹出框并刷选父页面，失败则提示失败原因，且弹出框不关闭。此时可以采用Ajax进行数据提交.

摘抄：https://www.cnblogs.com/Jxwz/p/4509618.html

第二种（常用）

onsubmit方法
onsubmit指定的方法返回true，则提交数据；返回false不提交数据。
οnsubmit=“return function” action中声明url

<form action="" methods="post" onsubmit="return check()">
 
  <input type="text" name="text" placeholder="请输入用户名"/>
  <input type="password" id="password"  name="password" placeholder="请输入密码"/>
  <input type="submit" value="提交"/>
</form>
 
 
<script>
 var re = /^[^\s]+$/;
 var pw = document.querySelector('#password')
  check(){
     if(re.test(pw.value)){
            return true;//不为空
 
        }else{
            return false;//为空
 
        }
 
  }
 
</script>