开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

form action执行js

form元素的action属性通常用于指定表单提交时数据发送到的URL。当你在action属性中指定一个JavaScript函数时，这个函数会在表单提交之前被调用。这种做法允许你在表单数据实际发送到服务器之前对其进行验证或修改。

基础概念

Form Action: HTML表单的action属性定义了表单提交时数据将发送到的URL。
JavaScript Execution: 在action属性中使用JavaScript函数可以在表单提交前执行客户端脚本。

相关优势

客户端验证: 可以在数据发送到服务器之前进行验证，减少无效请求。
用户体验: 可以即时反馈给用户输入是否正确，提高交互性。
减轻服务器负担: 通过在客户端处理一些逻辑，可以减少服务器需要处理的请求量。

类型

内联JavaScript: 直接在action属性中写入JavaScript代码。
函数调用: 调用已经定义好的JavaScript函数。

应用场景

表单验证: 在提交前检查必填字段是否填写，格式是否正确等。
动态修改数据: 在提交前根据用户输入或其他条件修改表单数据。
条件提交: 根据某些条件决定是否提交表单。

示例代码

以下是一个简单的例子，展示了如何在表单提交前使用JavaScript进行验证：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form with JavaScript Action</title>
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="javascript:validateForm();" method="post">
    Name: <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>

</body>
</html>

在这个例子中，如果用户尝试提交一个空的姓名字段，将会弹出一个警告框，并且表单不会被提交。

遇到的问题及解决方法

问题: 使用action="javascript:..."可能会导致安全问题，因为它容易受到跨站脚本攻击（XSS）。

解决方法:

避免内联脚本: 将JavaScript代码移至外部文件，并通过<script src="..."></script>引入。
事件监听: 使用事件监听器来处理表单提交事件，而不是在action属性中执行JavaScript。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form with Event Listener</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var form = document.querySelector('form');
    form.addEventListener('submit', function(event) {
        if (!validateForm()) {
            event.preventDefault(); // 阻止表单提交
        }
    });
});

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
    return true;
}
</script>
</head>
<body>

<form name="myForm" method="post">
    Name: <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>

</body>
</html>

在这个改进的例子中，我们使用了事件监听器来处理表单的提交事件，并在验证失败时阻止表单提交，这样做更加安全且易于维护。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js form常用操作

序列化form 序列化为字符串 var result=$("#form").serialize(); 结果 name=aa&pwd=bb 序列化为数组 var result=$("#form").serializeArray...value: 'aa'}, {name: 'pwd', value: 'bb'} ] 序列化为对象 var zj = zj || {}; zj.serializeObject = function(form...) { var o = {}; $.each(form.serializeArray(), function(index) { if (o[this['name']])...'name']] = this['value']; } }); return o; }; 调用方式 var result=zj.serializeObject($("#form

1.7K1 0

jQuery插件 -- Form表单插件jquery.form.js

jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。...jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进程的功能。...下载地址： http://malsup.com/jquery/form/#download http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html...的action，如果申明，则会覆盖 6 //type: type, //默认是form的method（get or post），如果申明，则会覆盖 7...form.name.value || !form.address.value) { 14 alert('用户名和地址不能为空，自我介绍可以为空！')

13.5K5 0

js form表单提交(jsp form表单提交方式)

为你提交的参数 function fromPost(URL, PARAMS) { var temp = document.createElement("form..."); temp.action = URL; temp.method = "post";

14.8K4 0

js 模拟form表单post提交

在客户端跳转页面思路2：使用form表格进行post提交实现方法：需要创建一个form表格，且数据必须在form表格中，用Input表格元素存起来，效果如下： /// form 表单提交...var form2 = document.createElement("form"); form2.id="form2"; form2.method="post"; form2.action...sid = document.createElement("input"); sid.name="sid"; sid.type="hidden"; sid.value = shopCartId; form2....appendChild(total); document.body.appendChild(form2); form2.submit(); //提交 ‍ 注：一定要记得加 document.body.appendChild...(form2); 上面form提交的方法，感觉传数据还是太麻烦了，必须写成form表单的元素，不知道有没有更加简单的方法，求指教

12.2K1 0

js与form交互方式总结

前言：刚开始接触web开发的时候，往往采用form表单直接提交的方式，但可能存在兼容问题，如： form method="" action=""> ...... form 后来熟悉了js，更加倾向于使用ajax提交表单，有时甚至连form标签都不使用了。...然而，从HTML语义化的角度来说，使用form表单有更强的可读性，虽然简单，仍简单总结下form与js的兼顾。...会自动忽略其他标签中的属性，如form标签中的onsubmit属性失效，js使用submit方法提交 function validate...{ return true; } else { return false; } } form action="

2.7K4 0

js – form表单提交不刷新

以后遇到或者会试一下吧) form action="" method="post" target="the_iframe"> <input; type="text" id="id_input_text...submit按钮效果触发之前我们就把数据提交了, 然后我们return false(让submit这次的点击触发事件失效, 否则表单又会提交一次, 并且刷新页面) 我们可以这样: ====== 如果你用原生js...> js代码: function post_data(){ // ajax数据提交代码 // ........我们在绑定onsubmit的时候是把return false放进onsubmit后面的调用函数内的, 这样子如果你的函数出现了错误, 将不会继续执行到函数最后’return false’这里, 还是会出现刷新的现象...> js代码: $(document).ready(function() { $('#err_form').submit(function() { //这次我们这么绑定 var contact =

14.5K1 0

js与form交互方式总结

js与form交互方式总结前言：刚开始接触web开发的时候，往往采用form表单直接提交的方式，但可能存在兼容问题，如： form method="" action=""> ...... form 后来熟悉了js，更加倾向于使用ajax提交表单，有时甚至连form标签都不使用了。...然而，从HTML语义化的角度来说，使用form表单有更强的可读性，虽然简单，仍简单总结下form与js的兼顾。...会自动忽略其他标签中的属性，如form标签中的onsubmit属性失效，js使用submit方法提交 function validate...{ return true; } else { return false; } } form action="

590 0

GitHub Action 定时任务执行时区处理

[最全总结，GitHub Action 自动化部署]( blog.csdn.net/Ber_Bai/art… 使用ssh连接到gitHub Actions服务器利用GitHub 的Actions自动同步...Github Actions 核心的能力在于触发工作流里的事件，schedule 这种类型可以定时执行任务事件。.../main.py # 执行特别注意：因为 Github 是国际网站，默认时区是 UTC 时间（协调世界时间），大致时间是冰岛和英国的时区。...schedule 延迟问题：GitHub 的官方文档明确写了，schedule 是无法保证准时执行的。...set-timezone 是一个可以设置环境时区的 action。

3901 0

js --- 执行机制

JS为什么是单线程的？　JS最初被设计用在浏览器中，那么想象一下，如果浏览器中的JS是多线程的。...process1 删除了该dom，而process2 编辑了该dom，同时下达2个矛盾的命令，浏览器究竟该如何执行呢？ 2 JS为什么需要异步?...如果JS中不存在异步，只能自上而下执行，如果上一行解析时间很长，那么下面的代码就会被阻塞。对于用户而言，阻塞就意味着"卡死"，这样就导致了很差的用户体验 3 JS单线程又是如何实现异步的呢？　　...是通过的事件循环(event loop)，理解了event loop机制，就理解了JS的执行机制。...，而是延迟了一段时间，满足一定条件后才去执行的，这类代码，我们叫异步代码。

6.3K2 0

JS执行机制

JS 是单线程 JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。...这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。 2....于是，JS 中出现了同步任务和异步任务。同步前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。...JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。 ...JS执行机制（事件循环） ? ? 4.

6.9K3 0

JS执行机制

JS执行机制以下代码执行的结果是什么？...console.log(1); setTimeout(function () { console.log(3); }, 0); console.log(2); 1.1 JS 是单线程...单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。...于是，JS 中出现了同步任务和异步任务。同步　　前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。...他们的本质区别：这条流水线上各个流程的执行顺序不同。 1.3 JS执行机制（事件循环） 1. 先执行执行栈中的同步任务。 2. 异步任务（回调函数）放入任务队列中。 3.

7.4K2 0

JS执行机制

JS 是单线程 JavaScript语言的一大特点就是单线程，也就是说，同-个时间只能做一件事。...这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。 2....于是，JS 中出现了同步任务和异步任务。同步前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。...JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。 ...JS执行机制（事件循环） ? ? 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环( event loop) .

7.5K3 1

JS执行顺序

javascript给人的直观感受是，从上往下执行，但实际上却不是这样的，先看个例子 1. console.log(test); 2. var test = "你好"; 3. console.log(...因为javascript执行时，在同一个作用域内是先编译再执行编译的时候会编译 function 和 var 这两个关键词定义的变量，编译完成后从上往下执行并向变量赋值所以执行第1行时, var test...已经执行过了，所以test不会报错，而test2就会报错需要注意的是，对 var test 执行编译时，只是先定义了 test 这个变量，并不会把 "你好" 这个值赋给test，而是到第2行时才给test...赋值的，这就是为什么第1行的执行结果是 undefined 对于上面的例子，可以这样理解 //先编译 var 定义的变量 1. var test; //编译完成后，从上到下执行代码 2. console.log...//执行结果是"你好" function test() { console.log("你好"); } 模拟编译执行过程 //找到 function 定义的部分进行编译 //以函数名作为变量名，同时用函数赋值

9.2K6 0

js api 之 fetch、querySelector、form、atob及btoa

js api 之 fetch、querySelector、form、atob及btoa 转载请注明出处: https://www.cnblogs.com/funnyzpc/p/11095862.html...js api即为JavaScript内置函数，本章就说说几个比较实用的内置函数，内容大致如下： fecth http请求函数 querySelector 选择器 form 表单函数 atob与btoa...Base64函数 Base64之atob与btoa 以前，在前端，我们是引入Base64.js后调用api实现数据的Base64的编码和解码的运算，现在新的ES标准为我们提供了Base64 的支持，...比如我们的表单是这样的： // html表单 form name="fm" method="post" action="/submit"> action="/form"> name:<input type="text

1.5K3 0

Github Action执行时遇到SSH key invalid format错误

Github Action是款非常不错的CI/CD工具，自从它问世以来发展的速度真可谓是快，在 Github 的官方市场中几乎能找到所有你想要使用的Action脚本进行引用。...本博客也是基于Github Action进行远程部署的，与常规的Github Pages服务不同，本站的静态文件是部署在国内某云厂商的静态服务器上面的，通过 tzzs/server-shell Action...集成，实现远程执行服务端的命令，来拉取最新生成的静态文件。...在没有调整过 Action 脚本及 SSH 私钥的情况下，上面的部署步骤竟然执行失败，报出如下的错误信息： 1 2 3 4 5 6 7 /usr/bin/ssh server sh /home/***/...，果然任务就能正常执行成功。

1021 0

React 支持 form action 是在作妖？不，它是一种重磅回归

1、HTML form action 先来看一段简单的代码 form id="form" method="get"> First name: <input type="text" value=...✓先用最基础的知识内容铺垫一下在 HTML 的表单元素中，我们可以通过监听 form 对象的 onsubmit 来回调函数的执行。也可以通过 action 属性来直接向服务端发送请求。..." name="picture" accept="image/*"> form> 当我们点击提交按钮时，action 方法就会触发执行。...会优先执行 4、案例学习了这些基础知识之后，我们来完成一个比较简单的案例。...如果一旦跟 next.js 有机结合... 不得不佩服 React 团队在设计项目架构解决方案上的超前思维。

3521 0

修改 jquery.validate.js 支持非form标签

尝试使用markdown来写一篇blog，啦啦啦源代码传送门：github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候，表单并不是一定包含在form之中...对此，在官方的源代码基础上做小小的改动，就能兼容原有form方式，也能使用于非form方式，何乐而不为呢。...分析官方代码之后，能得知它都是通过element.form找到当前input的form，在从form标签获取validate对象。那只要我们修改为我们指定的容器标签即可。..." acAc="4" name="xx" /> js..."> js"> $("#x").validate(); 当然

3.2K2 0

mongodb执行js脚本(一)---shell执行

mongodb执行js脚本(一)---shell执行 2015年06月09日 10:58:36 张小凡vip 阅读数 21310更多所属专栏： mongodb基础与运用版权声明：本文为博主原创文章...js脚本进行复杂的管理 mongodb 的shell是javascript实现的，如果直接使用js实现相应的功能则显得很直观和简便。...比如我们对一些数据进行统计计算，除了使用mapreduce之外,直接使用js也是很好的选择。...还有一些批处理，数据同步都可以使用js 使用js脚本进行交互的优点与缺点（1）无需任何驱动或语言支持；（2）方便cron或管理员定时任务；（3）注意点：任然是数据格式的问题；...js脚本一般会用来执行以下任务（1）备份；（2）调度map-reduce命令；（3）离线报告，离线任务；（4）管理员定时任务；如何运行一个js脚本 .

9.4K3 0

MongoDB执行JS脚本

可以使用大多数js语法。脚本执行方法第一种：进入shell。输入：mongo 脚本路径。（脚本内部需要先连接数据库。）...例： mongo /Users/guoshunfa/Desktop/test.js 第二种：进入shell。进入mongodb控制台。输入：mongo。选择数据库。输入：use 数据库名。...例： > use test switched to db test > load('/Users/guoshunfa/Desktop/test.js ') 语法数据库连接相关语法描述语法连接mongo

7672 0

python执行js文件

/usr/bin/python # -*- coding: UTF-8 -*- import execjs,os #执行本地自定义的js print execjs.compile('function...' '').call("test") #获取系统的路径 paths=os.path.dirname(__file__) print paths dir=paths+"/js.../modules.js" #执行*.js里的文件 print execjs.compile(open(dir).read().decode('utf-8')).call('add',3,4)

6.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭