javascript表单验证-数值和密码

Question

您好，我正在尝试创建简单的JavaScript密码验证以便提交表单。 我只希望用户如果密码正确就可以提交表单。 我知道这不是执行此操作的好方法，但就我的项目而言，这已足够。 我已经将表单输入数据链接到了Google表单。

如果有帮助，我也会按照本教程进行操作： http : //www.codeproject.com/Tips/721795/Store-your-form-data-in-Google-Spreadsheet

我拥有的代码有效，但是我想学习如何修改密码，以仅在密码正确和否的情况下才能提交表单。 来宾输入的数字是一个数值。 我还需要它不离开页面，而是希望可以自定义成功或错误通知。

这是我的代码。

表单html

<form>
  <input id="RSVPname" placeholder="NAME" type="text"><br>
  <input id="RSVPguests" placeholder="NO. OF GUESTS" type="text"><br>
  <input id="RSVPemail" placeholder="EMAIL" type="text"><br>
  <input id="RSVPpassword" placeholder="PASSWORD" type="text"><br>
</form>
<a id="ButtonSubmit" onclick="postContactToGoogle()" class="waves-effect waves-light waves-block btn-flat rsvpButton" type="submit" name="action"><span>rsvp</span></a>

JavaScript

function postContactToGoogle() {
  var name = $('#RSVPname').val();
  var guests = $('#RSVPguests').val();
  var email = $('#RSVPemail').val();
  var password = $('#RSVPpassword').val();

  $.ajax({
    url: "https://docs.google.com/forms/d/1DdFHTm3Fg832ehplr89053TvF5osNzVrahmRnovCSw/formResponse",
    data: {
      "entry.2005620554": name,
      "entry.1498269582": guests,
      "entry.1045781291": email,
      "entry.788806858": password
    },
    type: "POST",
    dataType: "xml",
    statusCode: {
      0: function () {
        window.location.replace("ThankYou.html");
      },
      200: function () {
        window.location.replace("ThankYou.html");
      }
    }
  });
}

我认为statuscode属性与我想要的东西有关。

Answer 1

Javascript表单验证与表单提交之前的验证有关。 因此，它与从服务器返回的http状态代码无关，因此在提交之后。

但是您的postcontacttogoogle函数什么也没做。 它应该进行瓶坯检查，并根据结果提交表单（或不提交）。

例如

if(name && name.length > 0 /*&& any other condition on your for data*/)  
{
  //invoke form submission
}
else 
{
   // alert("error");
   // or show inlined errors
}

Answer 2

您似乎在任何时候都无法验证密码。 您需要在某个地方指定密码是什么，然后在if正确的情况下放入if语句以运行其余代码。 大概您会将整个ajax代码放入其中，如下所示：

var correctPassword = 1234 // or whatever code you need to get your password
if (password == correctPassword && isNumeric(guests))
{  $.ajax({....

然后代替window.location.replace("ThankYou.html"); 您可以包括成功或错误通知。 window.location.replace将替换整个窗口。 如果要弹出通知，可以使用innerHTML属性替换一个特定的div或alert()