我可以同时使用 onclick 和 onsubmit 事件吗? [英] Can I use onclick and onsubmit events together?

问题描述

我正在制作一个网站注册页面，我需要首先验证我的表单，然后如果表单有效，我需要运行一些功能

I am making a website sign up page in which I need to first validate my form and then if the form is valid i need to run some function

我不喜欢 jquery.请用 js 提出答案.过去，我试过这个功能，但只有 onclic 功能有效......当表单有效并且我点击按钮时什么也没有发生

I would not prefer jquery. Please suggest answers with js.In the past,I've tried this function but only the onclic function works...when the form is valid and i click the button nothing happens

<form onsubmit=" // function to take place on submit  "> // This 
// function should take place if form has been validated by alerts as // well
<input required>
<input required>
<button type="submit" onclick="fn(); fn2(); fn3()" // I need to use onclick here as // these functions are validations using javascript alert
</form>

required 属性用于验证我正在使用 javascript 浏览器验证来验证表单.但是 javascript 警报验证是针对数字的(例如，我使用 if 条件仅在数字范围从 1 到 10 时才接受数字).如果表单有效，则赋予 onlick 的函数将不显示任何内容.并且在提交时，我需要它仅在表单有效时显示一些信息.

required attribute is for validation I am validating the form with javascript browser validation. But the javascript alert validation is for numbers(for eg. i used if condition to accept a number only if it ranges from 1 to 10).The functions given to onlick will not display anything if form is valid. And onsubmit i need it to display some information only if form is valid.

我希望如果表单无效，那么我给 onclick 的警报功能应该可以工作，当表单有效时，当我点击提交按钮时，它应该显示消息.

I expect that if the form is invalid then the alert functions i have given to onclick should work and when the form is valid, when i click the submit button it should display the message.

推荐答案

欢迎 Buckyball，如果我理解你的话，你需要一些验证然后提交你的数据.

Welcome Buckyball, if I understood you well, you need some validations and then submit your data.

A) 如果您在使用 min 和 max 时遇到问题，可以尝试使用 pattern正则表达式.

A) If you have some problems using min and max, you can try a pattern with a regular expression.

<form>
  <input pattern="\b([1-9]|10)\b" title="Number between 1 and 10" required>
  <button>Submit</button>
</form>

https://jsfiddle.net/80mbd62w/

B) 如果你想用 JS 验证.

B) If you want to validate with JS.

<form>
  <input required>
  <button>Submit</button>
</form>

JS

const $input = document.querySelector('input')

document.querySelector('form').onsubmit = e => {
  // You can add as many validations as you want
  if (!/\b([1-9]|10)\b/.test($input.value)) {
    alert('Number has to be between 1 and 10')
    e.preventDefault() // aborting
  } else {
    alert('ok') // after this the data will be submitted
    e.preventDefault() // don't forget to remove this line
  }
}

https://jsfiddle.net/so2ecwrL/

C) 如果您想使用 onclick 和 onsubmit 事件.

C) If you want to use onclick and onsubmit events.

document.querySelector('form').onsubmit = e => {
  alert('submit')
  e.preventDefault() // don't forget to remove this line
}

document.querySelector('button').onclick = e => {
  alert('button')
}

https://jsfiddle.net/uf4wxnoy/

希望这会有所帮助或至少为您指明正确的方向:)

Hope this help or at least point you to the right direction : )

这篇关于我可以同时使用 onclick 和 onsubmit 事件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！