使用JavaScript进行表单提交前的验证

最新推荐文章于 2021-04-08 08:40:28 发布
最新推荐文章于 2021-04-08 08:40:28 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： javascript

<%@ page language="java" import="java.text.*,java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'index.jsp' starting page</title>
    <SCRIPT type="text/javascript">
    <!--
    function checkForm(form){
    for (var i=0; i<form1.elements.length; i++) {
    if (form1.elements[i].value == ""){
    alert("请填写完整！");
    return false;
    }
    }
    return true;
    }
    //-->
    </SCRIPT>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
   
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
  </head>
 
  <body>
<FORM name="form1" method="POST" οnsubmit="return checkForm(this)">
 使用MyEclipse开发的第一个JSP页面！<BR>
 现在时间是 <%out.println(DateFormat.getInstance().format(new Date()));%>
<INPUT type="text" name="text1" size="4"/>
<INPUT type="text" name="text2" size="4"/>
<INPUT type="text" name="text3" size="4"/>
<INPUT type="Submit" name="btn_r" value="刷新">
</FORM></body>
</html>

如果onsubmit为return true，则提交表单，否则不提交。

在提交表单前，可以对表单或者其他脚本（如action属性）中的数据进行一些预先验证，可以在表单的onsubmit事件处理程序调用的验证函数中完成这一工作。所调用的验证函数中可以进行业务相关/无关的判断。

如果验证函数发现了一些不正确的数据或者空白域，那么就可以根据验证函数的结果取消提交。为了控制这个提交，onsubmit事件处理程序必须求值得到return true（允许继续提交）或者return false（取消提交）。它不仅需要调用的验证函数返回true或false，而且return关键字必须是最终值的一部分（比如上例子中的οnsubmit="return checkForm(this)"。

java学习开发者
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前台form 验证js大全
03-17
NULL 博文链接：https://583008872.iteye.com/blog/466341
web表单提交前用JavaScript验证
qq_19306197的博客
09-01 406
网上一大堆了，自己做个笔记。 Insert title here function check(form){ if (form.userid.value=="") { alert("请输入用户名"); form.userid.focus(); return false; } if (form.pws.value=="") { alert(
js表单提交前的验证
liukai6的博客
12-13 468
贴下代码 &amp;lt;form id=&quot;loadData&quot; method=&quot;get&quot; onsubmit=&quot;return checkForm()&quot; &amp;gt; &amp;lt;/form&amp;gt; function checkForm() { console.log($('#new_date').val())
javascript前台校验表单
温故而知新
11-17 614
表单代码为： javascript代码为：
使用JavaScript实现表单的前端简单验证后提交
donow81的博客
09-02 643
仅初学者适用，使用JavaScript实现表单的前端简单验证后提交
javascript实现常用的表单前台数据的校验
10-20 258
//一个工具的类，用来校验表单中一些常用的表单元素 var errMsg = { /* requied:{ //校验必填字段 msg: "this filed is required!", test: function(obj,load){ return obj.value.length>0||load||object.value=...
控件调用javascript,先验证后提交.
weixin_30550271的博客
06-07 63
1.写javascript函数的时候,根据条件在例如UserAddVerify()里return true或者false. 2.后台aspx.cs代码,例如: protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //给btnSave添加客户端事...
解决Myeclipse10中使用javascript验证form表单，返回true(false)不支持的问题
yangyanglovejunxi的专栏
10-18 1333
Myeclipse10存在一个Bug，使用javascript验证form表单，返回true(false)不支持， 例如代码： Myeclipse10中 onsubmit="return dosubmit()" 会显示红色 报错，程序运行 js验证失败！ 例如如下代码： 防止重复提交
【JavaScript】表单提交之前的前台处理检查三部曲
编程记录，亲测有效
03-12 3991
本来一个小小的表单的参数传递时非常简单的，是基础的基础，但是考虑到现在网上的不法分子越来越猖獗，而且那些平时没事做一心钻研黑客技术的人越来越多，你在表单提交之前，首先就应该在前台中处理一下，后台部分的当然也要处理sql注入的问题，不过本文主要讨论前台表单参数传递的问题。真不知道那些一心黑别人网站的人是怎么样，以为自己的技术很牛逼的样子，其实，有这么强的技术，就应该好好找份工作拿拿高薪，而不是专注黑
在表单提交前进行验证的几种方式
热门推荐
天空
07-30 3万+
在表单提交前进行验证的几种方式
js-实现原生表单提交验证.zip
07-11
原生js表单提交验证代码下载。原生JavaScript实现，适合新手学习js。用户填写完成后，点击提交按钮，判断填写的信息是否符合要求，如不符合将弹出相应的修改信息要求，引导用户正确填写表单。
JavaScript程序设计——页面设置与表单验证实验报告.docx
11-11
实现HTML界面设计、布局的方法。 实现各种控件的使用方法。 实现对界面项目进行表单验证的方法。 实现表单标记，表单提交方式、编码方式等知识点。
原生js实现表单验证（提交后验证）
08-29
在平常的页面当中，我们经常用到表单和表单验证，表单验证是数据进入数据库前一次在客户机利用脚本检查数据类型的行为。作为一个初学者，在这里贴下我的菜鸟代码。
利用JS提交表单的几种方法和验证
lovedboy2012学习笔记记录站
09-06 1258
工作中发现表单提交方便的问题，很多时候IE下提交好好的，打了火狐下就出现了问题，利用提交按钮就不成功了，于是利用JS的方式就成功了，也不知道为什么。在导师的催促下就总结出以下的几种常用表单提交的方法。 第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功        function validate(obj) {         if (c
javascript 表单提交和验证的方法
Code for Coffee
05-31 5824
一、使用submit按钮，结合onsubmit事件实现 点击提交表单的时候，触发onsubmit的事件，这个事件会调用checkForm函数，该函数用于判断用户名是否为空 当我们点击提交表单时，将会触发onsubmit事件 onsubmit里是return checkForm，即调用checkForm函数 该函数用于判断用户名是否为空 对于onsubmit，如果return的是false...
js基础-表单验证和提交
printdad的博客
04-08 495
基础知识： 原始提交： <form action="/login" method="post" id="form1"> <span>用户</span> <input type="text" name="username" id="username"/><br/> <span>密码</span> <input type="password" name="password" i
Promise-当一个接口需要依赖另一个接口的请求数据
信心比天才重要
04-13 5342
场景一：先调用getData1，再调用getData2，再调用getData3 ... //创建一个Promise实例，获取数据。并把数据传递给处理函数resolve和reject。需要注意的是Promise在声明的时候就执行了。 var getData1=new Promise(function(resolve,reject){ $.ajax({ type:"get...
JavaScript之form表单提交前验证的onSubmit事件
小汤包的博客
11-21 6866
在前端使用JavaScript验证表单数据时，对验证不通过的form表单要阻止其提交到后台。这时，可以使用onSubmit事件来阻止其提交。 &lt;form method="post" onsubmit="return checkBeforeSubmit()" action="registerSubmit"&gt; &lt;div&gt; ...
js验证表单提交的多种方法,submit,button, type='button'
qq_45064049的博客
05-18 1万+
js验证表单提交第一种用submit按钮提交表单第二种用button按钮进行提交第三种用第一种用submit按钮提交表单 <!doctype html> <html> <head> <title></title> </head> <body> <form action="index.php" method...
JavaScript表单提交与验证
"该资源是一个关于JavaScript的课件，主要讲解了Form表单提交以及如何使用JavaScript进行数据验证和交互。" 在Web开发中，`Form`表单是用户与网页交互的重要方式，用于收集用户输入的数据。在传统的HTML中，表单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值