2

私はjQueryにかなり慣れていないので、次のコードを記述して、ユーザーがパスワード/確認が有効かどうかを入力するときにユーザーに表示します。コードは反復的で汚いように感じますが、ユーザーが入力した内容の一部を削除しない場合にのみうまく機能します。その後、物事はちょっと風変わりになります。

これがjsフィドルです：http：//jsfiddle.net/JCTAc/

これがJS*です（チェックボックスのものは無視してください）：

$(function() {
  $('.checkbox').hide();
  $("#password").blur(function(){

var passwordVal = $("#password").val();
var checkVal = $("#password_confirmation").val();

  if ( passwordVal.length >=6 ) {
       $("#password").css("border","1px solid #9EAD3A"); 
      }
  else {
       $("#password").css("border","1px solid #E93E3C");
      $('.checkbox').hide();
  }
});

$("#password_confirmation").keyup(function() {

var passwordVal = $("#password").val();
var checkVal = $("#password_confirmation").val();

    if (passwordVal == checkVal) {
        if (checkVal.length > 5 ) {
        $("#password_confirmation").css("border","1px solid #9EAD3A");
        $(".checkbox").show(100);
    }
}
    else {
        $("#password_confirmation").css("border","1px solid #E93E3C");
        $('.checkbox').hide();
    }
});


$("#password,#password_confirmation").blur(function(){

var passwordVal = $("#password").val();
var checkVal = $("#password_confirmation").val();



    if (passwordVal != checkVal) {
        $('.checkbox').hide();
        $("#password_confirmation").css("border","1px solid #E93E3C");

    }
  });
});

</ p>

4

2 に答える 2

1

これにJquery Validationを使用しないのはなぜですか。役立つかもしれません。

ありがとう

于 2012-10-02T18:02:54.030 に答える
1

まず、jQuery/javascript でそのような境界線の色を設定しないでください。スタイルとブラウザーの動作をできる限り分離することが重要です。より良いアプローチは、クラス (.error、.validated など) を設定し、css からスタイリングを制御することです。また、コード内で何度も繰り返します。同じ機能が 3 回書かれています。その機能を機能に分解する真の兆候。

入力が検証されない場合は送信機能を無効にし、検証された場合は許可することもヒントです。

少し作り直しました。ぼかしとキーアップの検証。このコードもさらに最適化できると確信していますが、わずかな改善があるかもしれません: http://jsfiddle.net/JCTAc/5/

于 2012-10-02T18:29:48.253 に答える