用javascript响应表单的提交事件

javascript|响应

    我们有的时候要在提交表单之前对用户输入的数据进行验证,如果输入的不正确的话,就给一提示,并让从新输入,那么我们是怎么实现的呢?
现在我以一个需求的实现为例进行简要说明:
我的功能要求:
用户输入一个类型,要求是数字,所以我们进行数字验证。
在提交的时候对起类型id字段进行是否为空验证,如果为空的话,就给一个提示,并要求起从新输入

我们的JSP代码如下:
<%@page contentType="text/html; charset=GBK"%>
<html>
<head>
<title>addNewsType</title>

</head>
<body bgcolor="#ffffff">
<h2>新闻类型添加</h2>
<hr />
<form name="form1" method="post" action="<%=request.getContextPath()%>/news/NewsTypeAddAction.sh" 

>

<table>
  <tr>
    <td>新闻类型编号</td>
    <td>
      <input type="text" name="typeid" onBlur="isDigit(this.value)">    </td>
  </tr>
  <tr>
    <td>新闻类型名称</td>
    <td>
      <input type="text" name="typename">    </td>
  </tr>
  <tr>
    <td>新闻存放目录名称</td>
    <td>
      <input type="text" name="dir">    </td>
  </tr>
  <tr>
    <td>使用模版名称</td>
    <td>
      <input type="text" name="templatename">    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div align="center">
        <input type="submit" name="Submit" value="Submit">
        <input type="reset" value="Reset">    
      </div></td>
    </tr>
</table>
</form>
<script type="text/javascript">
function isDigit(s)
{
  var patrn=/^[0-9]{1,20}$/;
  if (!patrn.exec(s)&&s!=""){
    alert("请您输入数字!");
    document.form1.typeid.value="";
    document.form1.typeid.focus();
    return false;
  }
}

function  actionCheck(){
  if(document.form1.typeid.value==""){
    alert("新闻类型编号不能为空!");
    document.form1.typeid.value="";
    document.form1.typeid.focus();
    return false;
  }
}
</script>

</body>
</html>

我们的javascript检验部分不需要解释,主要是我们的检验代码要在要在form的onSubmit事件中实现,并且要使用return 返回值才能实现。也就是下划线显示的部分。
自己的一点粗浅认识,望多指教。

时间: 2024-11-02 13:35:16

用javascript响应表单的提交事件的相关文章

Javascript的表单验证-提交表单_javascript技巧

推荐阅读:Javascript的表单验证长度 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 坏数据不该抵达服务器:提交表单时的验证 表单域对象里有个form特性,它使用数组表示了整份表单的域 假如这里只有一个简单的信息文本框和一个邮政编码框,还有一个提交按钮 <form> <input id="message" name

一个JavaScript防止表单重复提交的实例_javascript技巧

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>防止重复表单提交</title> <style> #refresh{ display: none; width:200px; height:20px; background

一个JavaScript防止表单重复提交的实例

 <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title>防止重复表单提交</title>  <style>  #refresh{  display: none;  width:200px;  height:20px; 

Javascript的表单与验证-非空验证_javascript技巧

推荐阅读:Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱  JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 表单提交前要检查数据的合法性 在要对表单里的数据进行验证的时候,可以利用getElementById()来访问网页上任何一个元素 每个表单域都有一个form对象,可被传给任何验证表单数据的函数 <input id=

使用Ajax方法实现Form表单的提交及注意事项

写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续的异步操作. 常见的form表单提交方式 <!DOCTYPE HTML PUBLIC "-//W3C/

Javascript的表单验证-初识正则表达式_javascript技巧

推荐阅读:Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 验证日期 日期的格式相对特别,不能光凭其长度来验证 常见的日期格式:先以两位数表示日,再以两位数表示月,最后以四位数表示年,期间以斜线分隔. MM/DD/YYYY 博主:怎样设计出验证日期是否符合格式的代码呢? 先来看一下验证日期格式的逻辑吧 将表单域中的值取出,

Javascript的表单验证-揭开正则表达式的面纱_javascript技巧

推荐阅读:Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-初识正则表达式 在上篇文章给大家介绍了javascript的表单验证-初识正则表达式,本文给大家介绍Javascript的表单验证-揭开正则表达式的面纱,具体详情请看全文. 用元字符匹配相应的字符类型 创建正则表达式有点像创建字符串字面量,只不过正则表达式出现在一对"/"里 正则表达式中会用到一级元字符,用于连接字母与数字 "." 匹配任何字符,除

用ajaxSubmit做异步表单验证+提交,出现一个小问题

问题描述 //就是如果表单内不些内容点提交会弹出'信息不完整',确认后,再点击提交会连续弹出两次'信息不完整',确认后如果继续点击提交,那么就会弹出更多次的'信息不完整',然后再表单里写上内容再提交,数据库中就会出现很多条同样的信息.是哪里的问题?$(document).ready(function () { $('.tijiao').on('click', function () { $(this).bind('click'); var options = { type: 'post', ur

javascript-jsp新人求助,登录页面设定验证码和密码确认之后,在表单内提交前校验完全没响应

问题描述 jsp新人求助,登录页面设定验证码和密码确认之后,在表单内提交前校验完全没响应 <%@ page language="java" import="java.util.*" pageEncoding="gbk"%> <%@ page import = "java.util.*" %> <%@ page import = "util.*" %> <!DOCTY