验证我的表单？ "Please fill in required fields"

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

谢谢

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

这是我的答案…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;)

使用required属性的HTML唯一解决方案(仅适用于较新的浏览器):

<input required="required" />

一个如何做一个基于jscript的解决方案的例子可以在这里找到，这里或这个与jquery的一点帮助。

使用jQuery Validate进行验证

从这里下载并调用它。然后添加以下代码

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

或者直接使用HTML 5验证

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

使用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标签中输入

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

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

相关内容

最新更新

热门标签：