目的：

Question

目的：

验证表单中的所有输入。如果一切正常，则提交，否则向用户返回错误。

问题：

我想在表单中验证一些输入，但我不知道如何干净利落地完成。

如何在没有大量验证库的情况下安全地验证表单？

Answer 1

尝试这样：

    function validate() {
        if (validatefield(document.form.field1) && 
            validatefield(document.form.field2) && 
            validatefield(document.form.field3) && 
            validatefield(document.form.field4) && 
            validatefield(document.form.field5))
           return true;
        else
           return false;
    }

 function validatefield(field)
{
  //your condition of validation
}

Answer 2

像这样：http://www.w3schools.com/js/js_form_validation.asp

基本上，你的“onsubmit”调用一个函数，如果检查失败，则返回false，这样表单就不会提交。如果一切都过去了，就会提交。

Answer 3

jQuery验证非常简单易用。问题是什么？您可以在此处下载并查看演示。 http://plugins.jquery.com/validate/

Answer 4

要记住，代码必须尽可能面向对象。
应该理解必须在客户端和服务器端验证。
您必须知道，除了接收具有预期值的数据外，对数据库的查询仍然可能不安全

所以在这些要点之后，继续给出一个明确的例子。

的index.html

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
      <meta charser="utf-8" />
      <title>Form Validation</title>
      <script type="text/javascript" src="./js/jquery.js"></script>
    </head>

    <body>
      <div class="form-container">
        <form action="form_proccess.php" method="post" class="must-validate">
          <p>Nick<input type="text" name="nick" class="input-validate"/></p>
          <p>Password<input type="password" name="password" class="input-validate"/></p>
          <p>Email<input type="text" name="email" class="input-validate"/></p>
          <p>Name<input type="text" name="name" class="input-validate"/></p>
          <p>Country<input type="text" name="country" class="input-validate"/></p>
          <p>Birthday<input type="text" name="birthday" class="input-validate"/></p>
          <input type="submit" value="Send!" />
        </form>
      </div>
      <div id="form-errors">
        <ul></ul>
      </div>



    <script type="text/javascript">
      ;(function () {

        var Rules = {
          "nick"     : /^[0-9a-zA-Z_]{5,20}$/
        , "password" : /^.*(?=.{8,})(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).*$/
        , "email"    : /^[_a-z0-9.-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/
        , "name"     : /^[a-zA-Z -]+$/
        , "birthday" : /^[0-9]{4}-[0-9]{1,2}-[0-9]{1,2}$/
        , "country"  : /^[a-zA-Z]+$/
      }

      , Messages = { 
          "nick"     : "The nick can contain numbers, letters and underscores, between 5 and 20 characters."
        , "password" : "The password should contain uppercase and numbers at least 8 characters."
        , "email"    : "The email must be valid."
        , "name"     : "The name can contains only letters and spaces"
        , "birthday" : "The date must be in the format YYYY/MM/DD."
        , "country"  : "The country must contain only letters."
      }

      ;

      $(document).ready( function () {

        $('.must-validate').submit( function ( pressed ) {

            var form   = $(this).get(0)
              , inputs = $(form).find('.input-validate')
              , passed = true
              , errors = [ ]
              , input
              , html   = ''
              ;

            $.each( inputs, function( key, value ) {
                input = inputs [ key ];
                if(!Rules [ input.name ].test( input.value ) ) {
                    passed = false;
                    errors.push( Messages[ input.name ] );
                }
            });

            if ( errors.length ) {
                $.each( errors, function ( errorKey, errorValue ) {
                    html+= '<li>';
                    html+= errorValue;
                    html+= '</li>';
                });
                $('#form-errors ul').append(html);
            }

            return passed;

        });
      });

    })();
  </script>
</body>
</html>

基本的HTML文档，我们用javascript验证表单[在这个例子中我使用了jQuery，但没有它就完美地工作]。
当您提交相关表单时，浏览器会运行一个事件，我们会继续进行验证。
变量包含来自它们的正则表达式和消息。可以添加任意多个。
我们比较输入的值，（必须有类.validate input）;确保您可以更改和修改它。
最后，如果一切顺利，将表单数据发送到服务器。相反，如果出现错误，则向用户显示详细信息，以便他们更正。如果需要，您可以删除错误消息，但用户无法轻松访问，这应该尽可能具有预测性。

Validator.php

/**
 * All the regular expressions to be used
 */
private static $_rules = array(
        "nick"      => '/^[0-9a-zA-Z_]{5,20}$/'
      , "password"  => '/^.*(?=.{8,})(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).*$/'
      , "birthday" => '/^[0-9]{4}-[0-9]{1,2}-[0-9]{1,2}$/'
      , "email"     => '/^[_a-z0-9.-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/'
      , "name"      => '/^[a-zA-Z -]+$/'
      , "country"   => '/^[a-zA-Z]+$/'
);

/**
 * The flag contains the names of all the input that must be validated; 
 * Note that the flags elements must match with some of the rules elements.
 */

private $_flags;

  /**
   * Set the flags
   */

public function __construct ( Array $flags ) {
    $this->_flags = $flags;
}

/**
 * Set the data to be validated
 */

public function validate ( Array $data ) {

    $passed = true;

    if ( count ( $data ) == 0 ) {
        $passed = false;
    }
    else {

        foreach ( $this->_flags as $key ) {

            if ( ! in_array ( $key, array_keys ( $data ) ) )
                $passed = false;

            if ( $data [ $key ] == null ) 
                $passed = false;

            if ( ! preg_match( self::$_rules [ $key ], $data [ $key ] ) ) 
                $passed = false;
        }
    }

    return (bool) $passed;
  }
}

在这个类中，我们将所有正则表达式都放在一个静态变量中。
constructor有一个参数，可让您指定哪些项目应被视为有效，并明确我们使用的正则表达式。
最后，函数validate()将我们想要分析的所有值的array()作为参数。

form_proccess.php

<?php
require_once 'Validator.php';

$validator = new Validation( array (
      "nick"
    , "password"
    , "email"
    , "name"
    , "country"
    , "birthday"
  )
);

$passed = $validator->validate( $_POST );

if ( $passed ) {
    /**
     * The data received was validated :)
     */
}
else {
    /**
     * Some error ocurred!
     */
}

我希望这有帮助.-

使用jQuery验证输入

目的：

问题：

4 个答案:

的index.html

Validator.php

form_proccess.php