Question

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

我不希望使用jquery。请提出js的答案。在过去，我尝试过使用此函数，但是仅onclic函数有效...当表单有效且我单击按钮后，没有任何反应

<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>

必填属性用于验证我正在使用javascript浏览器验证来验证表单。但是javascript警报验证是针对数字的（例如，如果条件只接受范围为1到10的数字，我将使用此条件。）onlick给出的函数在格式有效时将不显示任何内容。并且onsubmit我仅在表单有效时才需要显示一些信息。

我希望如果表单无效，那么我赋予onclick的警报功能应该可以正常工作；当表单有效时，当我单击“提交”按钮时，它将显示消息。

Answer 1

是的，您可以在提交按钮上进行onSubmit和onClick。下面的示例将产生两个警报框。但是，如果将按钮设置为type =“ button”并在onClick函数中添加Form.submit（）以实际提交表单，则不会触发onSubmit。仅通过type =“ submit”按钮触发。要解决此问题，只需在手动提交表单之前直接从onClick函数中调用onSubmit函数即可。

<form onsubmit="myFunction()">
  Enter name: <input type="text" name="fname">
  <input type="submit" value="Submit" onClick="mySubmit(this.form)">
</form>

<script>
function myFunction() {
  alert("The form was submitted");
}

function mySubmit(theForm) {
    alert("My Submit");
}
</script>

Answer 2

您不需要为单击按钮和表单提交使用单独的功能，它们基本上是相同的，因为您将提交设置为按钮类型。

您只能使用一种（更好的做法）您可以选择其中任何一个，但我建议您$form.submit 你可以这样写

$yourFormVar.onsubmit = function(e){
   e.preventDeault();

   if($firstInput.value !== '1' || '2' /*... I am not very good at RegExp so you can use it*/){
       return alert('input value must be number greater than 1 and less then 10');
   }
   //other validations (with return statement);
   //now you can send variables to server;
   //i do not know technology you are using and i will use axios in this example;
   axios.post('/route', {
      data: $yourFormVar.serialize()
   })
   .then(res => {
     alert(res.data)
   })    
}

Answer 3

欢迎Buckyball，如果我很了解您，则需要进行一些验证，然后提交您的数据。

A）。如果您在使用min和max时遇到问题，可以尝试使用带有正则表达式的pattern。

<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进行验证。

<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事件。

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/

希望获得帮助，或者至少将您指向正确的方向：）

我可以一起使用onclick和onsubmit事件吗？

3 个答案: