Onblur或onchange检查,在注册表单中使用php函数

时间:2012-12-06 12:06:20

标签: php javascript ajax

我希望能够在文本框中更改后检查文本,并报告错误。 这是一个注册表。

这是register.php的一部分

<form action"" method="post">
<ul class="ul-reg">
<li>
<p>Username: </p><input name="username-field" type="text" onblur="someFunction()" /><span id="UsernamehelpText">      </span>
</li>
</ul>
</form>

然后我会有一个registerfunctions.php,我会存储所有函数来检查lenght,char,也许是正则表达式等等。我调用的函数并不是那么重要。我只是不知道如何打电话给他们。

形成我所看到的跨度是你发布错误的地方,但是如果有任何其他选项我打开它,我想要的是能够在与文本框相同的行中发布erorr文本

我已经检查了JavaScript和AJAX,但我在这方面很新,并且不太了解它是如何工作的。

2 个答案:

答案 0 :(得分:2)

在评论中讨论后,我明白了你的想法。

首先,一个解释。有两个地方可以进行验证:在您的前端(您的网页)和后端(在PHP脚本中保存已发布的值)。你真正不想保存的任何内容 - 例如未转义的SQL字符串,太长的字段等等 - 已经在PHP中验证,因为它可以轻松地进行Javascript验证。例如,没有任何事情阻止某人向您的服务器发送包含非法值的POST,甚至无需访问您的网页。

即使您需要在后端执行验证,在前端执行相同的验证仍然是用户友好的,因此用户不必等待很长时间才能看到错误。这也减少了服务器的流量。您可能想要在大型项目中执行的操作是使用某种系统来集中编写验证规则,然后使用这些规则动态生成PHP和Javascript验证。这样做的好处是你不会在两个地方复制你的业务规则,但在一个较小的项目中,它可能不值得麻烦。

前端中的验证看起来像这样:您将事件处理程序绑定到适当的事件或事件(例如,您可以添加onkeydown =“validateUserName()”,以便验证反应更快一些),并更新您的适当地发出警告。

<form action="" method="post">
  <ul class="ul-reg">
    <li>
      <p>Username: </p>
      <input id="username" name="username-field" type="text" onblur="validateUserName()" />
      <span id="UsernamehelpText"></span>
    </li>
  </ul>
</form>

<script type="text/javascript">
  function validateUserName() {
    var userNameElement = document.getElementById('username');

    //Do your work: Get the value of the user name field, check
    // the values against your validation rules...

    var helpText = document.getElementById('UsernamehelpText');
    if(isValid)
      helpText.innerHTML = "";
    else
      helpText.innerHTML = "Invalid!";
  }
</script>

在后端,当您处理表单时,您必须在PHP中检查相同的规则,以防止恶意或由于Javascript中的错误而发布非法值。如果发现错误,则不进行保存,而是可以使用输入字段中提交的值重新呈现表单,并显示一条指示无效内容的消息 - 这允许用户更改输入而不会丢失值提交。

答案 1 :(得分:1)

使用jQuery,它看起来像这样:

function someFunction() {
  $.ajax({
    url: "checkStuff.php",
    data: $("input[name='username-field']").serialize,
    success: function(data) {
      if (data == "correct") {
        $("#UsernamehelpText").html("Valid");
      } else {
        $("#UsernamehelpText").html("Invalid");
      }
    }
  });
}

您的PHP可能非常简单,仅检查输入的有效性,然后回声“正确”(如果是)。