JS的form表单提交

最新推荐文章于 2023-09-29 12:43:03 发布
最新推荐文章于 2023-09-29 12:43:03 发布
阅读量519 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/JeremyNine/article/details/77979260


<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="formjs.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            width: 420px;
            margin: 0 auto;
            padding-left: 40px;
            border: 1px dashed silver;
        }
        li{
            position: relative;
            list-style: none;
            line-height: 45px;
        }
        li label{
            display: inline-block;
            width: 90px;
            text-align: right;
            color: #3091ff;
            font-weight: bold;
        }
        li input[type="text"]{
            width: 200px;
            height: 30px;
            outline: none;
            border-radius: 5px;
            border: 1px solid silver;
            font-size: 18px;
        }
        li input[type="submit"]{
            width: 60px;
            margin-left: 110px;
            height: 25px;


        }
        li input[type="reset"]{
            width: 60px;
            height: 25px;
        }
        .error{
            position: absolute;
            display: none;
            white-space: nowrap;
            font-size: small;
            color: red;
        }
    </style>
</head>
<body>
<div class="block">
    <!--action="" 表单提交的路径-->
    <form action="" onsubmit="return subtxt()">
        <ul>
            <li>
                <label for="nickname">昵称：</label>
                <input type="text" class="content" name="nickname"/>
                <span class="error">*昵称不能为空！</span>
            </li>
            <li>
                <label for="name">姓名：</label>
                <input type="text" class="content" name="name"/>
                <span class="error">*姓名不能为空！</span>
            </li>
            <li>
                <label for="idcard">证件号：</label>
                <input type="text" class="content" name="idcard"/>
                <span class="error">*证件号不能为空！</span>
            </li>
            <li>
                <label for="age">年龄：</label>
                <input type="text" class="content" name="age"/>
                <span class="error">*年龄不能为空！</span>
            </li>
            <li>
                <label for="sex">性别：</label>
                <input type="radio" checked name="sex"/>男<input type="radio" name="sex"/>女
            </li>
            <li>
                <label for="pwd">密码：</label>
                <input type="text" class="content" name="pwd"/>
                <span class="error">*密码不能为空！</span>
            </li>
            <li>
                <label for="pwdnew">确认密码：</label>
                <input type="text" class="content" name="pwdnew"/>
                <span class="error">*密码不能为空！</span>
            </li>
            <li>
                <label for="address">地址：</label>
                <input type="text" class="content" name="address"/>
                <span class="error">*地址不能为空！</span>
            </li>
            <li>
                <input type="submit" value="注册" class="subinfo"/>
                <input type="reset" value="重置"/>
            </li>
        </ul>
    </form>
</div>
</body>

</html>






var arr=[];
window.onload=function (){
   //获取文本元素
    var context=document.getElementsByClassName("content");
    for(var i=0;i<context.length;i++){
        //当前元素失去焦点
         context[i].onblur=function (){
            /*this.name  为当前的元素名称*/
             if(this.name=="nickname")
             {
                //如果文本值为空  则显示提示信息
                 if(this.value=="")
                 {
                     document.getElementsByClassName("error")[0].style.display="inline-block";
                     this.style.borderColor="red";
                     arr[0]=false;
                 }
                 else{
                     arr[0]=true;
                 }
             }
             else if(this.name=="name")
             {
                 if(this.value=="")
                 {
                     document.getElementsByClassName("error")[1].style.display="inline-block";
                     this.style.borderColor="red";
                     arr[1]=false;
                 }
                 else
                 {
                     arr[1]=true;
                 }
             }
             else if(this.name=="idcard")
             {
                 if(this.value==""){
                     document.getElementsByClassName("error")[2].style.display="inline-block";
                     document.getElementsByClassName("error")[2].innerHTML="*证件号不能为空！"
                     this.style.borderColor="red";
                     arr[2]=false;
                 }
                 else
                 {
                     if(this.value.length!=18)
                     {
                         document.getElementsByClassName("error")[2].style.display="inline-block";
                         document.getElementsByClassName("error")[2].innerHTML="*证件号长度为18位！";
                         this.style.borderColor="red";
                         arr[2]=false;
                     }
                     else{
                         //取最后一位
                         var txt=this.value.substr(17,1);
                         if(isNaN(txt))
                         {
                             if(txt.toLowerCase()!="x")
                             {
                                 document.getElementsByClassName("error")[2].style.display="inline-block";
                                 document.getElementsByClassName("error")[2].innerHTML="*证件号格式不正确！";
                                 this.style.borderColor="red";
                                 arr[2]=false;
                             }
                             else
                             {
                                 arr[2]=true;
                             }
                         }
                         else{
                             arr[2]=true;
                         }
                     }
                 }
             }
             else if(this.name=="age")
             {
                 if(this.value=="")
                 {
                     document.getElementsByClassName("error")[3].style.display="inline-block";
                     document.getElementsByClassName("error")[3].innerHTML="*年龄不能为空！";
                     this.style.borderColor="red";
                     arr[3]=false;
                 }
                 else
                 {
                      if(isNaN(this.value))
                      {
                          document.getElementsByClassName("error")[3].style.display="inline-block";
                          document.getElementsByClassName("error")[3].innerHTML="*年龄格式不正确！";
                          this.style.borderColor="red";
                          arr[3]=false;
                      }
                      else
                      {
                          if(this.value<0||this.value>100)
                          {
                              document.getElementsByClassName("error")[3].style.display="inline-block";
                              document.getElementsByClassName("error")[3].innerHTML="*年龄不符合要求！";
                              this.style.borderColor="red";
                              arr[3]=false;
                          }
                          else
                          {
                              arr[3]=true;
                          }
                      }
                 }
             }
             else if(this.name=="pwd")
             {
                  if(this.value=="")
                  {
                      document.getElementsByClassName("error")[4].style.display="inline-block";
                      document.getElementsByClassName("error")[4].innerHTML="*密码不能为空！";
                      this.style.borderColor="red";
                      arr[4]=false;
                  }
                  else
                  {
                      if(this.value.length<5||this.length>10)
                      {
                          document.getElementsByClassName("error")[4].style.display="inline-block";
                          document.getElementsByClassName("error")[4].innerHTML="*密码长度为5-10位！";
                          this.style.borderColor="red";
                          arr[4]=false;
                      }
                      else
                      {
                        //判断密码的要求格式
                          arr[4]=true;
                      }
                  }
             }
             else if(this.name=="pwdnew")
             {
                 if(this.value=="")
                 {
                     document.getElementsByClassName("error")[5].style.display="inline-block";
                     document.getElementsByClassName("error")[5].innerHTML="*密码不能为空！";
                     this.style.borderColor="red";
                     arr[5]=false;
                 }
                 else
                 {
                     if(this.value.length<5||this.length>10)
                     {
                         document.getElementsByClassName("error")[5].style.display="inline-block";
                         document.getElementsByClassName("error")[5].innerHTML="*密码长度为5-10位！";
                         this.style.borderColor="red";
                         arr[5]=false;
                     }
                     else
                     {
                         //判断两次密码是否相等
                         var pwd=document.getElementsByClassName("content")[4].value;
                         if(this.value!=pwd)
                         {
                             document.getElementsByClassName("error")[5].style.display="inline-block";
                             document.getElementsByClassName("error")[5].innerHTML="*两次密码不一致！";
                             this.style.borderColor="red";
                             arr[5]=false;
                         }
                         else
                         {
                             arr[5]=true;
                         }
                     }
                 }
             }
             else{
                 if(this.value=="")
                 {
                     document.getElementsByClassName("error")[6].style.display="inline-block";
                     document.getElementsByClassName("error")[6].innerHTML="*地址不能为空！";
                     this.style.borderColor="red";
                     arr[6]=false;
                 }
                 else
                 {
                     arr[6]=true;
                 }
             }
         }
        //当前元素获得焦点  显示相反的造型
        context[i].onfocus=function (){
            if(this.name=="nickname"){
                document.getElementsByClassName("error")[0].style.display="none";
            }
            else if(this.name=="name")
            {
                document.getElementsByClassName("error")[1].style.display="none";
            }
            else if(this.name=="idcard")
            {
                document.getElementsByClassName("error")[2].style.display="none";
            }
            else if(this.name=="age")
            {
                document.getElementsByClassName("error")[3].style.display="none";
            }
            else if(this.name=="pwd")
            {
                document.getElementsByClassName("error")[4].style.display="none";
            }
            else if(this.name=="pwdnew")
            {
                document.getElementsByClassName("error")[5].style.display="none";
            }
            else{
                document.getElementsByClassName("error")[6].style.display="none";
            }
            this.style.borderColor="silver";
        }
    }
}
function subtxt(){
    //检查数组里面的值
   if(arr.length!=0&&arr.length==7)
   {
       for(var i=0;i<arr.length;i++)
       {
           if(arr[i]==false)
           {
               return false;
           }
       }
       return true;
   }
    else{
       return false;
   }
}

JeremyNine
关注
javascript实现自动提交form表单
06-18
内含联系方式，不懂用可以问我！多次修改后已无瑕疵，用它实现当页面刷新的时候自动提交表单数据，目前我把它运用在领取某论坛每日登录礼包这种繁琐的小事中，你还可以运用到更有价值的地方去。
Js 提交 form 表单
weixin_34138255的博客
11-18 363
　　本文主要讲如何使用Js提交表单，在使用ajax进行异步验证的多数情况下，需要使用Js提交表单，以下简单说几种提交表单的方式： 　　1、document.getElementById("formId").submit();　　　　　　　 需要form表单id. 　　2、document.getElementsByName("formName")[0].submit();　 需要for...
js form 表单的提交
weixin_34183910的博客
05-06 91
$("#confirm").click(function(){var url = "${basePath}${path}saverpGoodsbase";$("#form_item").attr("action", url);$("#form_item").submit();});};$("#form_item").attr("action", u...
js提交form表单
热门推荐
一直在奋起，一直在路上
08-27 4万+
前段时间将边用边学javascript.pdf书看完了,其中之前最不熟悉的也是这次印象最深刻的就是提交form表单,所以在这里总结一下js提交form表单,以及表单中对应的一些扩展知识O(∩_∩)O~
js 提交form表单和设置form表单请求路径的实现方法
01-19
如下所示： form表单ID：postform 设置表单请求url document.postform.action = SaveReturnInfo...以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了，希望大家多多支持软件开发网~
js提交form表单,并传递参数的实现方法
10-22
特别地，`action`属性在`<form>`标签中用于指定表单提交后，表单数据应该被发送到哪个URL。在JavaScript代码中，`document.getElementById("queryForm").action`可以设置或者修改这个提交地址。在示例代码中，`...
JS提交form表单实例分析
11-24
本文实例讲述了JS提交form表单。分享给大家供大家参考，具体如下： 一、javascript 页面加裁时自动提交表单： Form表单： <form method="post" id="myform" action="a.php"> <input type="submit" value=...
JavaScript动态创建form表单并提交的实现方法
10-23
在使用JavaScript动态创建表单时，还需要考虑到跨域请求、安全验证、数据验证等其他因素，以保证表单提交的安全性和可靠性。这些内容虽然没有在给定的文档中明确提及，但在实际开发中都是非常重要的考虑点。
JavaScript的form表单提交
God_JM的博客
04-10 733
开发工具与关键技术： VS 与 JS 作者：摆烂小明 撰写时间：2022 年 4 月 6 日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ JavaScript是一门脚本语言。 1、脚本语言：又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如ASCII)保存，只在被调用时进行解释或编译。 2、汇编语言：（assembly language）是一种用于电子计算
通过JS提交表单
wang037195的博客
03-05 1427
&lt;script type="text/javascript"&gt; function confirmOrder(){ $("#orderForm").submit(); } &lt;/script&gt; ... .. . &lt;form id="orderForm" class="form-horizontal" action="${pageContext.
使用js提交form表单的两种方法
weixin_33862993的博客
08-23 775
提交form表单的时候瑶族一些简单的验证，验证完后才能提交，避免无效提交。 1.当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在前端页面写；有两种方法，一种是用submit提交。一种是用button提交。方法一： 在jsp的前端页面的头部插入一个js方法： function checkUser(){ var result = document.getE...
JS 表单操作form
Nicole1118的博客
05-06 229
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="application/javascript"> /** ...
利用js提交form表单的方式
ruolanqingyi的博客
06-27 4万+
第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功&lt;script type="text/javascript"&gt; function validate(obj) { if (confirm("提交表单?")) { alert(obj.value); return true; } els...
js提交form表单方法
winkexin的博客
06-14 3340
form表格的写法，需要写id。
JS　无限长form表单提交
bushuwei的博客
03-20 528
１　简介 　　开发时候，总会遇到根据后台传的变量｛组件数｝来动态渲染组件的情况，比如后台传命令要绑定10个父子关系，则前台展开十个input组件，后台决定绑定5个福字关系，则前台展开5个input组件．再比如，每个门店可以针对每个商品类型设置安全库存，那么随着厂家生产的商品类别增加，则前端动态增加form->input组件． 　　思路：借用smarty魔板（没有smarty则需要j...
如何通过javascript提交表单form
Shelsea_x的专栏
07-10 3267
--How to Submit a Form Using JavaScript Generally, a form is submitted when the user presses a submit button. However, sometimes, you may need to submit the form programmatically using JavaScript. J
使用 JavaScript 提交表单（Form）的完整指南
最新发布
CyberOI的博客
09-29 1316
通过监听表单的提交事件，并在事件处理函数中获取表单字段的值，你可以对表单数据进行处理，比如发送到服务器进行保存或进行其他操作。在网页开发中，表单（Form）是一种常见的交互元素，它允许用户输入数据并将其发送到服务器进行处理。接下来，我们将使用 JavaScript 来捕获表单的提交事件，并编写处理函数来提交表单数据。通过将上述代码保存为 HTML 文件并在浏览器中打开，你将能够看到一个包含文本输入框和提交按钮的表单。最后，我们执行了提交操作，这里只是简单地将获取到的数据打印到控制台中。
js form表单提交 传参
09-03
在使用JavaScript提交表单时，我们需要使用form的submit()方法来触发表单的提交事件。传递参数的方法有多种。 1. GET方式传递参数：在form标签的action属性中设置要提交到的URL，并将参数直接附加在URL后面。例如： ```html <form id="myForm" action="http://example.com/myPage?param1=value1&param2=value2" method="GET"> <!-- 表单内容 --> </form> ``` 在提交表单时，浏览器会将表单的数据与URL中的参数一起发送给服务器。 2. 使用JavaScript动态构建URL参数：可以使用JavaScript来动态构建URL参数，并通过设置form的action属性来传递参数。例如： ```html <form id="myForm" action="http://example.com/myPage" method="GET"> <!-- 表单内容 --> </form> <script> var form = document.getElementById("myForm"); form.action = "http://example.com/myPage?param1=" + encodeURIComponent(value1) + "&param2=" + encodeURIComponent(value2); form.submit(); </script> ``` 在JavaScript中，我们可以使用encodeURIComponent()函数将参数值进行编码，以确保在URL中正确传递参数。 3. 使用POST方式传递参数：如果希望将参数作为请求的体部分发送，可以将表单的method属性设置为POST，并使用JavaScript来动态构建表单数据。例如： ```html <form id="myForm" action="http://example.com/myPage" method="POST"> <!-- 表单内容 --> </form> <script> var form = document.getElementById("myForm"); var formData = new FormData(form); formData.append("param1", value1); formData.append("param2", value2); var xhr = new XMLHttpRequest(); xhr.open("POST", form.action); xhr.send(formData); </script> ``` 在这种方法中，我们使用了FormData对象来存储表单数据，并使用XMLHttpRequest发送POST请求。通过append()方法，我们可以将额外的参数添加到formData对象中。 需要注意的是，使用这种方式传递的参数不会出现在URL中，而是作为请求的主体部分发送给服务器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值