form的onsubmit验证-另存

2024-05-30 02:48
文章标签 验证 form 另存 onsubmit

本文主要是介绍form的onsubmit验证-另存,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

网页表单的提交可以有多种方法实现。

        可以用javascript写个提交的方法,在button的onclick中触发。也可以将input的type设置成submit,并对form进行action 和method设置,直接进行提交。

        一般在提交表单之前都需要进行一些判断,如果使用第一种方法,那么这些判断就写到提交时触发的的Javasceipt的方法里就行。如果使用第二种方法,则需要用到form的一个属性-----“onsubmit”。

        用一个小例子来研究下这个“onsubmit”。

[plain]  view plain copy
  1. <body class="body1">  
  2.   
  3.         <form  method="post" action="test.jsp"  οnsubmit="submitForm(this);">  
  4.   
  5.         <input name="btnTest" class="button1" type="submit"  id="btnTest"  value="提交">    
  6.   
  7.     </form>   
  8.   
  9. </body>  
  10.   
  11.    
  12.   
  13. <script type="text/javascript">    
  14.   
  15.     Function  submitForm (form) {   
  16.   
  17.         // 一些需要在提交前进行的逻辑判断   
  18.   
  19.         return false;   
  20.   
  21.     }   
  22.   
  23. </script >  

 

        在点击按钮进行提交后,如果设置了onsubmit,则首先会调用到onsubmit中的方法,onsubmit的值为true则继续提交,为false则不提交,默认值为true,那么,上面的js中的方法中返回了false,可以成功提交表单吗?

       答案是可以正常提交。调试的时候这里卡了很久,明明是false却照样成功的过去了,很是郁闷。

       这样的话,不管返回true or false 都会提交,这个验证方法就起不了作用了。

       所以若false不提交需要将代码:

 

       <form  method="post" action=" test.jsp"  οnsubmit=" submitForm(this);">

       改为:

       <form  method="post" action=" test.jsp"  οnsubmit="return submitForm(this);">

      

       查查资料,找找原因,分析分析:

       onsubmit属性就像是<form>对象的一个方法名,其值(一个字符串)就是其方法体,默认返回true;和Java一样,在该方法体中你可以写任意多个语句,包括内置函数和自定义函数,

如代码:

 

οnsubmit="

    alert(' submit '); // 内置函数

    submitForm (); // 自定义函数

    alert(this.tagName); // 用到了this关键词

    ......(任意多条语句)   

    return false;

"

 

 

就相当于代码:

 

Form.prototype.onsubmit = function() {

    alert('submit'); // 内置函数

    submitForm (); // 自定义函数

    alert(this.tagName); // 用到了this关键词

    ......(任意多条语句)   

    return false;

};

 

 

这样的话就覆写了(override)其默认方法(默认返回true)

 

经过这样的分析后,以上情况就不难理解了:

<form action="test.jsp" method="post" οnsubmit="submitForm();">

 

这样写,override方法的效果为: 

Form.prototype.onsubmit = function() {

    submitForm();

};

 

 

在这里submitForm()虽然返回false,但我们只执行了此函数,没有对其结果进行任何处理。而代码

 

<form action="test.jsp" method="post" οnsubmit="return submitForm();">

 

 

override方法的效果为: 

Form.prototype.onsubmit = function() {

    return  submitForm();

};

 

        这样,我们利用到了它的返回值,达到了预期效果。

 

        感受:

        这个不起眼的return是相当的重要啊。。。

        虽然javascript与java语言没什么关系,但是很多javascript的问题我们都可以用Java的思维方式来思考模拟.毕竟他们都是面向对象的语言,在逻辑方面有些共通点.这样对了解javascript内部也有点帮助.

这篇关于form的onsubmit验证-另存的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1015368

相关文章

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

C++ | Leetcode C++题解之第393题UTF-8编码验证

题目: 题解: class Solution {public:static const int MASK1 = 1 << 7;static const int MASK2 = (1 << 7) + (1 << 6);bool isValid(int num) {return (num & MASK2) == MASK1;}int getBytes(int num) {if ((num &

C语言 | Leetcode C语言题解之第393题UTF-8编码验证

题目: 题解: static const int MASK1 = 1 << 7;static const int MASK2 = (1 << 7) + (1 << 6);bool isValid(int num) {return (num & MASK2) == MASK1;}int getBytes(int num) {if ((num & MASK1) == 0) {return

easyui同时验证账户格式和ajax是否存在

accountName: {validator: function (value, param) {if (!/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/i.test(value)) {$.fn.validatebox.defaults.rules.accountName.message = '账户名称不合法(字母开头,允许4-16字节,允许字母数字下划线)';return fal

easyui 验证下拉菜单select

validatebox.js中添加以下方法: selectRequired: {validator: function (value) {if (value == "" || value.indexOf('请选择') >= 0 || value.indexOf('全部') >= 0) {return false;}else {return true;}},message: '该下拉框为必选项'}

form表单提交编码的问题

浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urlencoded; charset=UTF-8        那么我们如果需要修改编码,不使用默认的,那么可以如下这样操作修改编码,来满足需求: hmtl代码:   <meta http-equiv="Conte

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

前端form表单+ifarme方式实现大文件下载

// main.jsimport Vue from 'vue';import App from './App.vue';import { downloadTokenFile } from '@/path/to/your/function'; // 替换为您的函数路径// 将 downloadTokenFile 添加到 Vue 原型上Vue.prototype.$downloadTokenF

web群集--nginx配置文件location匹配符的优先级顺序详解及验证

文章目录 前言优先级顺序优先级顺序(详解)1. 精确匹配(Exact Match)2. 正则表达式匹配(Regex Match)3. 前缀匹配(Prefix Match) 匹配规则的综合应用验证优先级 前言 location的作用 在 NGINX 中,location 指令用于定义如何处理特定的请求 URI。由于网站往往需要不同的处理方式来适应各种请求,NGINX 提供了多种匹

React 笔记 父子组件传值 | 父组件调用子组件数据 | defaultProps | propsType合法性验证

1.通过props实现父组件像子组件传值 、方法、甚至整个父组件 传递整个父组件则   [变量名]={this} import Header from "./Header"render(){return(<Header msg={"我是props传递的数据"}/>)} import React,{Component} from "react";class Header extends