2012-03-21 22 views
1

私はjqGridフォームでパスワード確認入力を作成しようとしていますが、私は間違った方法でそれをやっていると思います。その理由は私の実装では、既に定義されたユーザを編集するときに、両方のフィールド(passwordとpassword_confirm)にアスタリスクを持つユーザパスワードが含まれているからです。jqGridパスワード確認

何も問題はありませんが、編集時に両方のフィールドを空にして、値が含まれている場合にのみ検証する方が良いと思います。これは、コードの一部です:

COLNAMES:[ "名前"、 "ユーザ名"、 "メール"、 "パスワード"、 "パスワードの確認"]、

colModel:[{名: "名」インデックス: "名前"、編集可能:真、editrules:{必須:真}}、

他のフィールド ....

{名: "パスワード"、インデックス "パスワード"、編集可能:true、edittype: "パスワード"、非表示:true、editrules:{編集:true、必須:true}}、 {name: "confirm_password"、index: "confirm_password

私が2つのオブジェクトを定義しているのがわかりましたが、実際には2つのオブジェクトが定義されていますパスワードと確認のための別の1つ私はグリッドを投入するとき、私は両方のフィールドの同じ値を返します。

実装を改善するにはどうすればよいですか?

ありがとうございます。

答えて

1

この回答をしばらく検索していましたが、私は自分の解決策を考え出しました。私はDB-Redisのフィールドを私の場合に追加したくなかったので、パスワードチェックのフィールドをオンザフライで作成し、最初のパスワードフィールドと一致することを確認する必要がありました。パスワードチェックフィールドはバックエンドに送信されますが、これはバグではなく機能です。

オンでコード。

我々が定義する最初の関数は、パスワード・チェック・フィールドを作成し、元のパスワードフィールドに追加しますいずれかになります。

function createPassCheck(el) { 
      // Create the containing table row 
      var passCheck = $("<tr></tr>").addClass("FormData") 
        .attr({ 
          id: "tr_passwordCheck", 
          rowpos: 20 
        }); 
      // Create a cell for the label and add it to the row 
      var passCheckLabelTd = $("<td></td>") 
        .addClass("CaptionTD").text("Password Check"); 
      passCheck.append(passCheckLabelTd); 
      // Prepare the cell for the input box. All 
      // the cells have a non breaking space, we add 
      // one as well to keep aligned. We then add it to the row. 
      var passCheckTd = $("<td>&nbsp;</td>") 
        .addClass("DataTD"); 
      passCheck.append(passCheckTd); 
      // Create an input box, and add it to the input cell 
      var passCheckInput = $("<input></input>") 
        .addClass("FormElement ui-widget-content ui-corner-all") 
        .attr({ 
          id: "passwordCheck", 
          name: "passwordCheck", 
          role: "textbox", 
          type: "password" 
        }); 
      passCheckTd.append(passCheckInput); 
      // Finally append the row to the table, we have been called after 
      // the creation of the password row, it will be appended after it. 
      var tbodyEl = el.parentNode.parentNode.parentNode; 
      tbodyEl.appendChild(passCheck[0]); 
    } 

我々は、我々は一つの他の機能を追加する必要があるキーを上に移動する前に、 1つは、2つのパスワードが一致するかどうかをチェックするものです。

function customPassCheck(cellvalue, cellname) { 
      // Get a reference to the password check input box. You see 
      // the 'tr_passwordCheck' id we are using? We set that id in 
      // the function "createPassCheck". 
      var passCheckVal = $("#tr_passwordCheck input").val() 

      // If both fields are empty or the passwords match 
      // we can submit this form. 
      if (
        (cellvalue == "" && passCheckVal == "") 
        || 
        cellvalue == passCheckVal  
       ) { 
        return [true, ""]; 
      } 

      // Can you guess why we are here? 
      return [false, "Password and password check don't match."]; 
    } 

最後に、パスワードを編集時に空白にする機能をカスタムフォーマッタとして登録することでこれを行います。

function customPassFormat(cellvalue, options, rowObject) { 
      // When asked to format a password for display, simply 
      // show a blank. It will make it a bit easier when 
      // we editing an object without changing the password. 
      return ""; 
    } 

現在jqGridでのパスワードフィールドを定義し、それを特別なものにすることができます

jQuery("#crud").jqGrid({ 
.... 
.... 
colModel:[ 
    .... 
    { 
    name:'password', 
    index:'password', 
    width:80, 
    align:"right", 
    editable:true, 
    // It is hidden from the table view... 
    hidden: true, 
    editrules:{ 
     // ...but we can edit it from the panel 
     edithidden: true, 
     // We are using a custom verification 
     custom:true, 
     // This is the function we have created 
     // to verify the passwords 
     custom_func: customPassCheck 
    }, 
    edittype: 'password', 
    // Our custom formatter that will blank the 
    // password when editing it 
    formatter: customPassFormat, 
    editoptions: { 
     // This is where the magic happens: it will add 
     // the password check input on the fly when editing 
     // from the editing panel. 
     dataInit: createPassCheck 
    } 
    }, 
.... 
.... 

すべての人々だそれ!

ファビオ