当 2 个输入字段不匹配时阻止提交表单

Question

我赠送免费门票给学生免费参加培训 class 我在他们的门票上写下每个学生的 phone 编号，以防止其他学生使用偷来的门票进入。

我正在尝试设计一个表格，供学生注册为候选人并获取他们的数据。

在表格上，我希望他们输入他们的 phone 号码和印在我送给他们的机票上的唯一代码。

我试图让只有持有我的票的学生才能提交表格。

当 phone 号码和票号不匹配时，如何防止使用 javascript 提交表单？

下面是一个 javascript 示例，我用它来防止在电子邮件不匹配时提交表单。

我知道下面的示例不是最佳解决方案，但我仍然需要解决方案。谢谢

代码示例；

function check_email()
{
    var email = document.getElementById("email").value;
    
 if(email.localeCompare("google@gmail.com" || "google@gmail.com")) {
      
        alert("ATTENTION! \nThe email address that you provided did not match with the email that is associated.");
        return false;
    }
    return true;
}

<form action='' onsubmit="return check_email();">
<input type="password" name="email" placeholder="go*****b@*****.com" required='' id="email"/>

<button href='/' type='submit' id="submitForm">Submit</button> <button class="button" type="reset" value="Cancel">Reset</button>
</form>

Answer 1

您可能想使用 event.preventDefault()（检查此问题：JavaScript code to stop form submission

Answer 2

从评论来看，我承认你已经把pairs的数据写在书里了。然后，您可以将它们全部写入成对数组（数组json）。

var data = [{phone: '08012345678', ticket: 'ACTF'}, {phone: '08012345679', ticket: 'ACTG'}];

// set false default

document.querySelector('form').addEventListener('submit', function (e) 
{

  var phNumber = document.getElementById("phone").value;
  var scTicket = document.getElementById("ticket").value;
  var isMatch = false; 
    // check if any same
  for(var i=0; i<data.length; i++) {
    // If same, proceed submit.
    if (data[i].phone === phNumber && scTicket === data[i].ticket){
      isMatch = true;
      return true;
    }
  }
  
    //if the validator check fails, prevent the form from being submitted
  if(isMatch == false){
    e.preventDefault();
    alert('Not match!');
  }
});

<form action='post' >
<input type="text" name="phone" placeholder="Phone Number" required='true' id="phone"/>
<input type="password" name="ticket" placeholder="Secret Ticket Code" required='true' id="ticket"/>

<button href='/' type='submit' id="submitForm">Submit</button> <button class="button" type="reset" value="Cancel">Reset</button>
</form>

当 2 个输入字段不匹配时阻止提交表单

Prevent Form Submission When 2 Inputs Fields Do Not Match

javascript

forms