javascript表单验证 - 数值和密码

时间:2016-05-09 06:18:54

标签: javascript jquery forms

您好我正在尝试创建一个简单的javascript密码验证,以便提交表单。我只是希望用户能够在密码正确的情况下提交表单。我知道这不是一个很好的方法,但就我的项目而言,它就足够了。我已将表单输入数据链接到谷歌表单。

如果有帮助,我也会按照本教程进行操作: 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 属性与我想要的东西有关。

2 个答案:

答案 0 :(得分:0)

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
}

答案 1 :(得分:0)

您似乎无法在任何时候验证密码。您需要在某处指定密码,然后将if语句放在var correctPassword = 1234 // or whatever code you need to get your password if (password == correctPassword && isNumeric(guests)) { $.ajax({.... 语句中,以便在正确的情况下运行其余代码。大概你会把整个ajax代码放在里面,就像这样:

window.location.replace("ThankYou.html");

然后您可以包含您的成功或错误通知,而不是window.location.replaceinnerHTML将替换整个窗口。如果您想要弹出通知,可以使用alert()属性替换一个特定div或/resources