验证来自表单的所有输入。如果一切正常，则提交，否则向用户返回错误。
我想验证表单中的一些输入，但我不知道如何干净利落地完成。
如何在没有繁重的验证库的情况下安全地验证表单？
【问题讨论】：
标签： php javascript validation
所以在这些点之后，继续举一个清晰的例子。
<!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>
.validate input）；确保您可以更改和修改它。
/**
* 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()作为参数。<?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 验证是非常简单易用的东西。问题是什么？您可以在此处下载并查看演示。 http://plugins.jquery.com/validate/
【讨论】：
像这样：http://www.w3schools.com/js/js_form_validation.asp
基本上，您的“onsubmit”调用一个函数，如果检查失败则返回 false 以使表单不提交。如果一切通过，它就会提交。
【讨论】：
试试这样：
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
}
【讨论】：