Question

我有一个用户名表单。其中有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>

由于

Answer 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; ?>

Answer 2

这是我的答案...在clasic 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>

Saludos;）

Answer 3

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

<input required="required" />

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

Answer 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 />

Answer 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()" ...

Answer 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 }
        });
    }
}

验证我的表格？ “请填写必填字段”

6 个答案: