验证我的表格？ “请填写必填字段”[关闭]答案

【问题标题】：Validation on my form? "Please fill in required fields" [closed]验证我的表格？ “请填写必填字段”[关闭]
【发布时间】：2013-03-13 17:53:27
【问题描述】：

我有一个用户名表单。其中有2个字段，用户名和密码。基本上我想要它，所以如果用户没有输入字段并按下“提交”，则会显示如下错误 "请输入必填字段"

我知道 JavaScript 或 PHP 可以，但不知道怎么做。

这里是用户和密码表单的代码：

<div id="sessionContainer" class="clearfix">
  <div class="content">
    <form action="goto.php" class=" sign-in" method="post">
      <div style="margin:0;padding:0"></div>
      <h3>Enter Details</h3>
      <p><font size="-1">Please enter your details</font></p><br>
      <div class="clearfix">
        <label for="">Username or email address</label><br>
        <input class="xlarge" id="email" name="email" tabindex="1" type="text" value="" />
      </div>
      <div class="clearfix">
        <label for=""><br>
          Password</label><br>
        <input class="xlarge" id="password" name="password" tabindex="2" type="password" value="" />
      </div>


      <p class="remember">&nbsp;</p>
      <p class="remember">
        <button class="btn btn-m btn-blue" id="signin_submit" name="commit" type="submit" tabindex=5>Sign in</button>
      </p>

谢谢

【问题讨论】：

你是用jquery还是只用js？请提供更多信息
请查看 w3schools.com/js/js_form_validation.asp 以通过 javascript 进行验证。服务器端验证在这里效率不高。
@PiyasDe 为什么不呢？无论如何，这是必要的。
@PiyasDe 你应该同时使用这两个... 只在客户端验证有什么意义。老实说，客户端验证更适合用户体验。您应该始终在后端进行验证，因为客户端可以被篡改并且可以禁用 javascript...
-1 表示零研究工作。

标签： php javascript html forms

【解决方案1】：

<?php if(!isset($_POST['email']) || !isset($_POST['password'])

此代码将检查这些字段中的任何一个是否有值。如果没有，您可以输出错误消息。整个上下文的代码如下：

<?php if(!isset($_POST['email']) || !isset($_POST['password']): ?>
    <div>Please fill in all fields!</div>
<?php endif; ?>

【讨论】：

嗨，这段代码应该放在哪里？在 goto.php 中还是我必须制作新文件？

【解决方案2】：

这是我的答案...在经典的 javascript xD 中：

<html>
  <head>
  <script type="text/javascript">
  function validar()
  {
     var right = 1;

     if(document.getElementById('email').value.length==0)
     {
        right = 0;
        document.getElementById('emptymail').innerHTML = "Empty Mail o Username";
     }
     if(document.getElementById('password').value.length==0)
     {
        right = 0;
        document.getElementById('emptypass').innerHTML = "Empty Password";
     }

    if(right == 1)
    {
      document.forms["formu"].submit();
    }

  }
  </script>
  </head>
  <body>
  <form action="goto.php" class=" sign-in" method="post" name="formu" id="formu">
        <div style="margin:0;padding:0"></div>
        <h3>Enter Details</h3>
        <p><font size="-1">Please enter your details</font></p><br>
        <div class="clearfix">
          <label for="">Username or email address</label><br>
          <input class="xlarge" id="email" name="email" tabindex="1" type="text" value="" /><div id="emptymail"></div>
        </div>
        <div class="clearfix">
          <label for=""><br>
            Password</label><br>
          <input class="xlarge" id="password" name="password" tabindex="2" type="password" value="" /><div id="emptypass"></div>
        </div>


        <p class="remember">&nbsp;</p>
        <p class="remember">
          <button class="btn btn-m btn-blue" id="signin_submit" name="commit" type="button" tabindex=5 onclick="validar();">Sign in</button>
        </p>

  </form>
  </body>
  </html>

感谢 ;)

【讨论】：

正如上面 Jeff 所说，Javascript 可以被篡改，也可以被禁用。 IMO，服务器端始终是最好的方法。 ;-)
没关系...但无论如何你可以有两种方式...客户端和服务器端...我做两种方式...实际上我使用 ajax 反正...和术语使用或不使用 JS 应该在项目的初始部分完成；）

【解决方案3】：

使用 required 属性的纯 HTML 解决方案（仅适用于较新的浏览器）：

<input required="required" />

可以在here、here 或this one with a little jquery help 中找到如何执行基于 jscript 的解决方案的示例。

【讨论】：

【解决方案4】：

使用jQuery Validate 进行验证

从here 下载并调用它。然后添加此代码

rules:
{
    email:
    {
        required: true
    }

},
messages:
{
    email:
    {
        required: "Please enter your email."
    }
}

或者只是使用 HTML 5 验证

<input id="email" name="email"  type="text" value="" required />

【讨论】：

【解决方案5】：

要使用 JavaScript，您需要查找表单的 OnSubmit 属性

如果您使用 OnSubmit 调用的函数失败（返回 false），您可以做很多事情，但作为示例，此代码将显示一个弹出框

<script>
function checkForm()
{
  if (document.getElementById('email').value.length==0 || document.getElementById('password').value.length==0)
  (
    alert("fill in required fields")
    return false;
  )
  return true;
}
<script>

然后在你的表单标签中放置

<form onsubmit="return checkForm()" ...

【讨论】：

【解决方案6】：

var $form = $('form'),
    $user = $('#email),
    $pass = $('#password');

$form.on('submit', function(e) {
    e.preventDefault();   // stop the default behavior
    if ($user.text().length === 0) {
        $user.addClass('error'); // do something with the error class or add attribute 'required'
    } else if ($pass.text().length === 0) {
        // do something else
    } else if ($user.text().length > 0 && $pass.text().length > 0) {
          // post the form
          $.ajax({
              url: //URL where you send,
              data: $form.serialize(),
              success: function(e) { // do something },
              error: function(e) { // do something }
        });
    }
}

【讨论】：