ユーザー名、パスワードなどの一連のフィールドを含むフォームの作成に取り組んでいます。送信ボタンがクリックされたときに検証を行いたいです。
境界線の色からアラートを取得しようとしています。すべてのフィールドが有効です。境界線を緑色に変更する必要があります。エラーがある場合は、赤色に変更する必要があります。
誰でも私の問題に関して何か考えがあります
誰か提案があれば??
12157 次
14 に答える
18
jqueryプラグインを使用できます....ここにあります。JQuery フォーム検証のカスタム例
于 2012-10-13T12:21:44.397 に答える
6
jQuery 検証プラグインを使用: http://docs.jquery.com/Plugins/Validation
このプラグインでは、フィールドの検証ルールを定義する必要があります。特定の検証ルールの特定のフィールドのエラー メッセージを設定することもできます。
このプラグインは、有効なフィールドと無効なフィールドにクラスを追加します。
そのクラスの css を指定する必要があります。
例えば：
$(document).ready(function(){
$(".my_form").validate({
rules:{ // validation rules
email_address: {
required:true,
email: true
},
password:{
minlength: 6
},
confirm_password: {
equalTo:"#password"
}
},
messages: {
email_address: {
required: "Please enter email address",
email: "Please enter valid email address",
},
/*
likewise you can define messages for different field
for different rule.
*/
}
errorClass: "signup_error",
/*This is error class that will be applied to
invalid element. Use this class to style border.
You can give any class name.*/
});
});
送信ボタンをクリックし、フィールドが無効な場合、プラグインは として指定した要素にクラスを追加します。errorClassフィールドに有効な値を入力すると、プラグインはこのクラスを削除し'valid'、デフォルトでクラスを追加します。
これら 2 つのクラスを使用して、単純な要素を使用して有効な要素と無効な要素のスタイルを設定できます。
.valid {
border-color:"green"
}
.signup_error {
border-color:"red"
}
これで問題が解決することを願っています。
于 2012-11-05T12:47:46.157 に答える
4
Js私は行く方法です。jQuery を検索すると、非常に優れた jQuery バリデーターを見つけることができます。
シンプルなバリデーターをカスタムビルドするには、次のようにします
<form class="validator">
<input type="text" name="my-input-1" data-validator="integer"/>
<input type="text" name="my-input-2" data-validator="email"/>
....
</form>
<script>
$("form.validator").submit(evt, function() {
var errors = 0;
$(this).find('[data-validator]').each(function(e, i) {
var value = $(this).value;
switch($(this).data('validator')) {
case 'integer':
if (!(parseFloat(value) == parseInt(value)) && !isNaN(value)) {
$(this).css({'border-color': '#FF0000'});
errors++;
} else
$(this).css({'border-color': '#000000'});
break;
case 'email':
if (..... // regex validate email ...) {
$(this).css({'border-color': '#FF0000'});
errors++;
} else
$(this).css({'border-color': '#000000'});
break;
}
});
if (errors > 0) {
// If you want to prevent default event execution no matter what
evt.preventDefault();
// If you want you other attached events to NOT run
evt.stopPropagation();
// signal failure
return false;
}
// All is well, go on
return true;
});
</script>
もちろん、すべてのバリデーターの関数を作成することは常に良い習慣であり、jQuery ウィジェット (jQuery Widget Factory を使用することをお勧めします) で全体をラップすることをお勧めします。これにより、将来的に機能を拡張し、変更に柔軟に対応できます。
于 2012-10-13T11:58:15.523 に答える
2
DOJO ライブラリを使用してフォーム フィールドを検証できます。実装は簡単です。
以下は道場を実装するためのチュートリアルです
http://dojotoolkit.org/documentation/tutorials/1.6/validation/
そして、これはあなたが見ることができる実際の例です...
http://dojotoolkit.org/documentation/tutorials/1.6/validation/demo/dijitcheck.html
于 2012-11-03T10:37:24.153 に答える
1
ニーズのサーバー側検証の例。試してみてください。
<?php
error_reporting(0);
$green = "border: 3px solid green";
$red="border: 3px solid red";
$nothing="";
$color = array ("text1"=>$nothing , "text2"=>$nothing) ;
if ( $_POST['submit'] ) {
if($_POST['text1']) {
$color['text1'] = $green;
}
else $color['text1'] = $red;
if($_POST['text2'] ) {
$color['text2'] = $green;
}
else $color['text2'] = $red;
}
?>
<form method="post">
<input type="text" name="text1" style="<?php echo $color ['text1']?>" value="<?php echo $_POST['text1']?>">
<input type="text" name="text2" style="<?php echo $color ['text2']?>" value="<?php echo $_POST['text2']?>">
<input type="submit" name="submit">
</form>
ノート
- 常にユーザー入力をサニタイズします。
- error_reportingoffはまったく良い習慣ではありません。これは本番環境のコードではないので、私はそれを行いました。
- issetまたはこのような同様の関数を使用してpost配列にアクセスする前に確認してください。
- 使用する前に、必ず変数が存在するかどうかを確認してください。
于 2012-11-09T17:39:17.187 に答える
1
私のアドバイスはjQueryを使用します
最初に複数の入力を作成して、それらにクラスを与えることを試みます
html：
<input type="text" class="validate" value="asdf" />
<input type="text" class="validate" value="1234" />
<input type="text" class="validate" value="asd123" />
<input type="text" class="validate" value="£#$&" />
<input type="text" class="validate" value=" " />
次に、以下のコードを使用して、それがどのように機能するかを確認します
jQuery：
// Validate Function
function validate(element) {
var obj = $(element);
if (obj.val().trim() != "") {
// Not empty
if (!/^[a-zA-Z0-9_ ]{1,10}$/.test(obj.val())) {
// Invalid
obj.css('border-color', '#FAC3C3');
if (!obj.next().hasClass('error'))
{ obj.after('<span class="error">Please use letters or numbers only and not more than 10 characters!</span>'); }
else
{ obj.next().text('Please use letters or numbers only and not more than 10 characters!'); }
} else {
// Valid
obj.css('border-color', 'lightgreen');
if (obj.next().hasClass('error'))
{ obj.next().remove(); }
}
} else {
// Empty
obj.css('border-color', '#FAC3C3');
if (obj.next().hasClass('error'))
{ obj.next().text('This field cannot be empty!'); }
else
{ obj.after('<span class="error error-keyup-1">This field cannot be empty!</span>'); }
}
}
$(document).ready(function() {
// Each
$('.validate').each(function() {
// Validate
validate(this);
// Key up
$(this).keyup(function() {
// Validate
validate(this);
});
});
});
jsfiddle： http: //jsfiddle.net/BerkerYuceer/nh2Ja/
于 2012-11-07T14:05:01.840 に答える
1
一般的なJavaScriptの目的のためだけに検証ライブラリを作成しました。ユニットテストもされています！必要なものは何でも簡単にオーバーライドできます: https://github.com/parris/iz
無効なフィールドを強調表示する限り、そのフィールドのスタイルを変更するか、クラスを追加するだけです。以下の例は、入力の背景色を変更し、メッセージを追加するだけです。
作業例: http://jsfiddle.net/soparrissays/4BrNu/1/
$(function() {
var message = $("#message"),
field = $("#field");
$("#the-form").submit(function(event) {
if (iz(field.val()).alphaNumeric().not().email().valid){
message.text("Yay! AlphaNumeric and not an email address");
field.attr("style","background:green;");
} else {
message.text("OH no :(, it must be alphanumeric and not an email address");
field.attr("style","background:red;");
}
return false;
});
});
バリデーターは iz と呼ばれます。単純に検証を連鎖させ、すべてが合格したかどうか、または「エラー」オブジェクトをチェックすると詳細が表示されます。さらに、独自のエラー メッセージを指定できます。github のドキュメントを確認してください。
ここで何が起こっているかというと、ページの準備ができたら、submit イベントのクリック ハンドラーを設定しています。return false;送信コールバックの一番下に、フォームが送信されないようにします。return true;フォームが続行される場合。return false の代わりにあなたもできますevent.preventDefault();が、私は一貫性のために return 構文を好みます。複数のフォーム要素を持つ現実の世界では、次のようなことを行うことができます (疑似コード):
var passed = true;
if (check field 1 is false)
...
if (check field 2 is false)
...
if (check field n is false)
passed = false
style and add message
if passed
return true
else
return false
if ステートメントは検証ルールをチェックし、それに応じて DOM を変更します。このようにすることで、成功したフィールドと失敗したすべてのフィールドの完全なリストと、何が正しくないかを完全に説明することができます。
于 2012-11-04T03:31:31.530 に答える
1
私は過去にこのプラグインを使用したことがあり、実装が非常に簡単になり、優れたドキュメントと例があります。
于 2012-11-05T11:11:04.330 に答える
0
$("#btn").click(function(){
// Check all of them
if( $.trim($("#file").val()) == ""){
$("#file").css("border","1px solid #ff5555");
}else{
$("#file").css("border","1px solid #cccccc");
if( $.trim($("#showboxResimBaslik").val()) == ""){
$("#showboxResimBaslik").css("border","1px solid #ff5555");
}else{
$("#showboxResimBaslik").css("border","1px solid #cccccc");
if( $.trim($("#showboxResimEtiket").val()) == ""){
$("#showboxResimEtiket").css("border","1px solid #ff5555");
}else{
if($.trim($("#showboxResimSehir").val()) == ""){
$("#showboxResimSehir").css("border","1px solid #ff5555");
}else{
$("#showboxResimSehir").css("border","1px solid #cccccc");
$("#resimYukleForm").removeAttr("onSubmit");
$('#resimYukleForm').bind('submit', form_submit);
}
}
}
}
});
于 2012-10-17T09:38:21.960 に答える
0
これは、jQueryでこれを行うための短く正確で簡潔な方法です。
HTML:
<form id="myform" name="form" action="http://www.google.com">
<div class="line"><label>Your Username</label><input class="req" type="text" /></div>
<div class="line"><label>Your Password</label><input class="req" type="password" /></div>
<div class="line"><label>Your Website</label><input class="req" type="text" /></div>
<div class="line"><label>Your Message</label><textarea class="req"></textarea></div>
<div class="line"><input type="submit" id="sub"></submit>
</form>
CSS:
.line{padding-top:10px;}
.inline input{padding-left: 20px;}
label{float:left;width:120px;}
jQuery:
$(function() {
function validateform() {
var valid = true;
$(".req").css("border","1px solid green");
$(".req").each(function() {
if($(this).val() == "" || $(this).val().replace(/\s/g, '').length == 0) {
$(this).css("border","1px solid red");
valid = false;
}
});
return valid;
}
$("#sub").click(function() {
$('#myform').submit(validateform);
$('#myform').submit();
});
});
于 2012-11-09T04:55:12.243 に答える
0
おそらく最も簡単な方法は、この JavaScript を使用することです: http://livevalidation.com/examples#exampleComposite
あなたの説明に一番合っていると思います。
于 2012-11-05T17:02:59.523 に答える
0
こんにちは、フォームのフィールドで html5 の「required」と「pattern」を使用できます。間違っている場合は赤い枠が表示され、正しい場合は緑の枠が表示されます。色が希望どおりでない場合は、:valid および :invalid 入力フィールドのスタイルを設定することもできます。私はそれをテストしたことはありませんが、何もしないよりはましです ;)
于 2012-11-09T15:24:29.457 に答える
0
以下のリンクを確認してください。ここでは、空のフィールドのみをチェックしました。フィールドが空の場合は、入力フィールドの境界線の色を変更する入力フィールド ID を変更しました。 http://jsfiddle.net/techprasad/jBG7L/2/
利用した
$("#myb").click(function(){
これはボタンクリックイベントですが、送信イベントを使用できます。
于 2012-11-07T06:57:04.297 に答える
-1
最初に JavaScript を学びます。js の基本的な知識があり、ロジックを知る必要がある場合は、読み進めてください。まず、フォーム送信時に関数を実行するためのイベント ハンドラーが必要です。最も簡単な方法は (より良い方法はありますが)
<form action="som.php" onsubmit="functionName()">
フォームはこちら
</form>
これにより、functionname という関数がトリガーされます。関数名関数で入力フィールドにアクセスし、正規表現を使用して検証します
function functionName()
{
//verification code
if(verified)
{
//code to change border to green
}
}
入力フィールドを取得して検証する必要があります。その方法がわからない場合は、Javascript の本をいくつか入手して ください 値が入力されたらすぐに検証する必要がある場合は、入力フィールドで onchange イベントを使用します
于 2012-10-13T11:37:11.337 に答える