为啥我的form的onsubmit事件不起做用?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为啥我的form的onsubmit事件不起做用?相关的知识，希望对你有一定的参考价值。
onsubmit不起做用,没有被执行,表单被无条件提交了,为什么会这样?
程序大致如下,代码太长,中间的就省略了.
<html>
<head>
<link href="inc/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<SCRIPT language=javascript>
function CheckRegInput()
..........
if(confirm("是否确认提交？"))
return true;
else
return false;
</SCRIPT>
<FORM name=reg_form onSubmit="return CheckRegInput();" action=manager/regchk.asp method=post>
.......
</FORM>
</body>
</html>
已经找到问题所在了,原来是CheckRegInput里少了一个""
建意大家在以后写js的时候把IE的显示所有脚本错误通知打开,要不然出错了也不提示.
<input type='submit' onclick="return CheckRegInput();" value=""> 参考技术B 你试试
----------------------------------------
<html>
<head>
<link href="inc/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<SCRIPT language=JavaScript>
function CheckRegInput()
if(confirm("是否确认提交？")) return true;
else
return false;
</SCRIPT>
<FORM name="reg_form" onSubmit="return CheckRegInput();" action=manager/regchk.asp method=post>
<input type="submit" name="Submit" value="提交" />
</FORM>
</body>
</html>
vue.js test-utils 为啥我的 onSubmit 函数 mock 没有被调用？
【中文标题】vue.js test-utils 为啥我的 onSubmit 函数 mock 没有被调用？【英文标题】：vue.js test-utils Why my onSubmit function mock is not called?vue.js test-utils 为什么我的 onSubmit 函数 mock 没有被调用？ 【发布时间】：2019-03-09 14:40:33 【问题描述】：我正在尝试使用以下规范文件测试提交表单事件：
ContactForm.spec.js
import Vue from "vue";
import Vuex from "vuex";
import storeMock from "./mocks.js";
import VeeValidate from "vee-validate";
import i18n from "@/locales";
import Vuetify from "vuetify";
import mount, shallowMount from "@vue/test-utils";
import ContactForm from "@/components/Home/ContactForm.vue";
Vue.use(Vuex);
Vue.use(VeeValidate, errorBagName: "errors" );
Vue.use(Vuetify);
describe("ContactForm.vue", () =>
let wrapper;
let store = new Vuex.Store(storeMock);
const v = new VeeValidate.Validator();
beforeEach(() =>
const el = document.createElement("div");
el.setAttribute("data-app", true);
document.body.appendChild(el);
);
it("submit valid form when click submit", async () =>
// given
const getters =
language: () =>
return "fr";
,
"authentication/loading": () =>
return false;
,
store = new Vuex.Store( getters );
// const sendMessageMock = jest.fn( () => Promise.resolve() );
const sendMessageMock = jest.fn();
const options =
sync: false,
store,
provide: () => (
$validator: v
),
i18n,
mocks :
sendMessage: sendMessageMock
;
// when
wrapper = shallowMount(ContactForm, options);
const contactForm = wrapper.find('#contactForm');
const submitBtn= wrapper.find('#btnSend');
// console.log(contactForm.html());
// when
contactForm.trigger('submit.prevent');
// then
expect(sendMessageMock.called).toBe(true);
);
);
但是这个测试没有通过……
console.log
✕ submit valid form when click submit (157ms)
● ContactForm.vue › 点击提交时提交有效表单
expect(received).toBe(expected) // Object.is equality
Expected: true
Received: undefined
Difference:
Comparing two different types of values. Expected boolean but received undefined.
77 | contactForm.trigger('submit.prevent');
78 | // then
> 79 | expect(sendMessageMock.called).toBe(true);
| ^
80 | );
81 | );
82 |
at Object.toBe (tests/unit/ContactForm.spec.js:79:36)
at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:296:22)
at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:114:21)
at step (node_modules/@babel/runtime/helpers/builtin/asyncToGenerator.js:10:30)
at _next (node_modules/@babel/runtime/helpers/builtin/asyncToGenerator.js:25:9)
at node_modules/@babel/runtime/helpers/builtin/asyncToGenerator.js:32:7
这里是要测试的组件vue
ContactForm.vue
<template>
<form id="contactForm" onSubmit="sendMessage">
<input v-model="language" type='hidden' name='locale'>
<v-layout row wrap align-center>
.../...
</v-layout>
<v-text-field
.../...
</v-text-field>
<v-textarea .../... ></v-textarea>
<v-btn round @click="clear">.../...</v-btn>
<v-btn id="btnSend" round large color="primary" type="submit">Submit</v-btn>
</form>
</template>
<script>
import mapGetters from "vuex";
.../...
import router from "@/router";
export default
name: "contactForm",
data()
return
.../...
;
,
computed:
...mapGetters(["language"]),
...mapGetters("authentication", ["loading"]),
honorificPrefix: function()
.../...
,
watch:
language(newLanguage)
.../...
,
methods:
setPrefix: function(value)
.../...
,
sendMessage: function()
.../...
,
clear: function()
.../...
,
mounted()
.../...
;
</script>
欢迎反馈...
【问题讨论】：
【参考方案1】：已解决...
更改表单标签
删除 mocks：在 shallowMount() 中阻塞并使用 setMethods() 将 sendMessage() 替换为 sendMessageMock()
it("submit valid form when click submit", async () =>
// given
const getters =
language: () =>
return "fr";
,
"authentication/loading": () =>
return false;
,
store = new Vuex.Store( getters );
const sendMessageMock = jest.fn();
const options =
sync: false,
store,
provide: () => (
$validator: v
),
i18n
;
// when
wrapper = shallowMount(ContactForm, options);
wrapper.setMethods( sendMessage: sendMessageMock );
const contactForm = wrapper.find('#contactForm');
// when
contactForm.trigger('submit.prevent');
// then
expect(sendMessageMock).toBeCalled();
);
【讨论】：
以上是关于为啥我的form的onsubmit事件不起做用?的主要内容，如果未能解决你的问题，请参考以下文章
为啥我的“onclick()”事件在 Angular 中不起作用？
form.submit 方法 并不会触发 form.onsubmit 事件