-5

客观的：

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

问题：

我想验证我的表单中的一些输入，但我不知道如何干净地做到这一点。

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

4

4 回答 4

0

试试这样：

    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
}
于 2013-03-13T05:26:09.750 回答
0

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

基本上，您的“onsubmit”调用一个函数，如果检查失败则返回 false 以便表单不提交。如果一切通过，它就会提交。

于 2013-03-13T05:29:43.510 回答
0

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

于 2013-03-13T05:30:08.923 回答
0
  • 第一点要记住，代码必须尽可能面向对象。
  • 应该理解，必须在客户端和服务器端都进行验证。
  • 你要知道，除了接收带有期望值的数据外，在对数据库的查询中使用仍然可能不安全

所以在这些点之后，继续给出一个清晰的例子。

索引.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）；确保您可以更改和修改它。
  • 最后，如果一切顺利，会将表单数据发送到服务器。相反，如果有错误，则向用户显示详细信息，以便他进行更正。如果需要，您可以删除错误消息，但这对用户来说不是很容易访问，这应该尽可能具有预测性。

验证器.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()作为参数an 。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!
     */
}

我希望这有帮助。-

于 2013-03-13T05:30:43.730 回答