HTML JS拦截表单错误提交

form 表单每次提交前都要验证内容有无填写还有填写的正确与否

这些 可以用Ajax提交代替 form表单提交,但是有些提交可能必须是 form 表单提交 根据已有经验,勿喷!)

更新 --   ajax实现文件上传    --  https://blog.csdn.net/Inuyasha1121/article/details/51915742

比如说    文件上传

enctype="multipart/form-data"  文件上传必须加

表单提交按钮那里   type="button"   οnclick="return CheckPost();"      再写一个检查的 js 方法

<form  id="addForm"  method="post" name="addForm" action="/addchip.do" enctype="multipart/form-data"  >
    <input type="hidden" name="exist" id="exist" value="0"/><%--默认没上传为0--%>
    <select id="brand" class="list-select">
              <option value="">请选择</option>
              <c:forEach items="${brandselect}" var="item">
              <option value="${item.brandName}">${item.brandName}</option> 
              </c:forEach>
     </select>
    
   <input type="file" name="uploadDriver" class="ipt"  id="uploadDriver" accept=".bin,.hex" contenteditable="true" style="display: none;" /> 
   <input type="text" id="textup1" class="text-upload" readonly/>
   <input type="button" id="btnup1" class="btn-upload" alt="" value="上传"/>
    
   <input class="bginput" type="button" name="dosubmit" id="chipbtn" value="确定"  onclick="return CheckPost();" >
#addForm  为表单的name属性

function CheckPost() {
var brandText = document.getElementById("brandText").value;
var uploadDriver = document.getElementById("uploadDriver").value;
if (uploadDriver != ""){
    document.getElementById("exist").value = 1;
  }
if (brandText == ""){
    alert("请填写品牌名!");
    addForm.brand.focus();
    return false;
  }
if (uploadData == ""){
    alert("请上传数据文件!");
    addForm.series.focus();
     return false;
}

addForm.submit();  //重点  没有返回false  就提交了
}
为了兼容火狐浏览器(火狐浏览器无法点击上传文件按钮)
   $('#btnup1').click(function(event) {
        $('#uploadDriver').click();
    });

    //capture selected filename
    $('#uploadDriver').change(function(click) {
        $('#textup1').val(this.value);
    });

按回车键提交
jQuery(document).bind('keyup', function(e) {
     if (event.keyCode == 13) {
         jQuery("#chipbtn").click();//点击登录
      }
    });
本来我用 required  
<input type="file" name="uploadDriver" accept=".bin,.hex" style="display: none;" required /> 
来检查提交前是否有上传文件  

 An invalid form control with name='uploadDriver' is not focusable

表单元素隐藏时, 无法用  required

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 可以使用 HTML、CSS 和 JavaScript 来创建登录页面。HTML 用于创建页面结构,CSS 用于样式设计,JavaScript 用于交互和验证。可以使用表单元素来收集用户输入的用户名和密码,然后使用 JavaScript 进行验证和提交。同时,还可以使用 CSS 来美化页面,使其更加吸引人。 ### 回答2: 登录页面是一个用于用户进行身份验证的页面。在HTML和CSS中,可以通过创建表单来收集用户的登录信息,然后使用JavaScript来验证这些输入是否正确。 首先,可以使用HTML来创建一个包含登录表单的页面。表单通常包含用户名和密码两个输入字段,还可以包含一个“登录”按钮来提交表单。可以使用`<form>`标签来定义表单,并在其内部使用`<input>`标签来定义输入字段,例如: ```html <form> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <button type="submit">登录</button> </form> ``` 接下来,在CSS中可以使用样式来美化登录页面。可以设置表单的样式、输入字段的样式以及按钮的样式,以实现一个吸引人且易于使用的界面。例如,可以使用CSS的`border`、`background-color`和`font-size`属性来设置表单元素的样式。 最后,在JavaScript中可以添加一些验证逻辑来检查用户输入的合法性。可以使用JavaScript的事件监听器来监听表单提交事件,并在事件触发时执行相应的验证逻辑。例如,可以检查用户名和密码字段是否为空,或者与已存储的用户信息进行匹配。 ```javascript document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单的默认提交行为 var username = document.querySelector('input[name="username"]').value; var password = document.querySelector('input[name="password"]').value; if (username === 'admin' && password === 'password') { alert('登录成功!'); // 进行跳转或其他操作 } else { alert('用户名或密码错误!'); } }); ``` 通过结合HTML、CSS和JavaScript,可以创建一个功能完善且外观美观的登录页面,用于用户进行身份验证。这样的页面在各类网站和应用程序中广泛使用。 ### 回答3: HTML、CSS和JavaScript主要用于创建网页及其相关元素。登录页面通常是网站或应用程序的入口,用于用户身份验证和访问控制。下面是一个示例登录页面的代码: ```html <!DOCTYPE html> <html> <head> <title>登录页面</title> <style> /* CSS样式 */ body { font-family: Arial, sans-serif; background-color: #f1f1f1; } h1 { text-align: center; } .login-container { width: 300px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .form-group { margin-bottom: 10px; } .form-group label { display: block; font-weight: bold; } .form-group input { width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 3px; } .form-group input[type="submit"] { background-color: #4CAF50; color: #fff; cursor: pointer; } .form-group input[type="submit"]:hover { background-color: #45a049; } </style> </head> <body> <h1>用户登录</h1> <div class="login-container"> <form id="login-form"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" id="password" name="password" required> </div> <div class="form-group"> <input type="submit" value="登录"> </div> </form> </div> <script> // JavaScript代码 document.getElementById("login-form").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单默认提交行为 var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 添加逻辑以进行用户身份验证 alert("登录成功!欢迎," + username); }); </script> </body> </html> ``` 上述代码中,HTML部分定义了登录页面的结构和元素。CSS为页面添加了样式,使其具有更好的外观和用户体验。JavaScript部分为表单提交事件添加了一个侦听器,用户在登录表单上点击"登录"按钮时,它会拦截表单的默认提交行为,并获取用户输入的用户名和密码进行身份验证。接下来的处理逻辑可以根据实际需求进行自定义,这里使用了一个简单的弹窗作为成功登录的提示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

huang_ftpjh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值