目的：
フォームからのすべての入力を検証します。すべて問題なければ送信し、そうでなければユーザーにエラーを返します。
問題：
フォームのいくつかの入力を検証したいのですが、きれいに行う方法がわかりません。
重い検証ライブラリなしでフォームを安全に検証するにはどうすればよいですか?
質問する
300 次
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
- コードは可能な限りオブジェクト指向でなければならないことに注意してください。
- クライアント側とサーバー側の両方で検証する必要があることを理解する必要があります。
- 期待値を含むデータを受け取るだけでなく、データベースへのクエリで使用するには安全ではない可能性があることを知っておく必要があります。
したがって、これらのポイントの後、明確な例を挙げてください。
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>
- JavaScript を使用してフォームを検証する基本的な HTML ドキュメント [この例では jQuery を使用しましたが、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_process.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 に答える