2012-03-21 5 views
1

jqGrid 양식에 암호 확인 입력을 만들려고하는데 잘못된 방식으로 처리하고 있다고 생각합니다. 그 이유는 내 구현에서는 이미 정의 된 사용자를 편집 할 때 두 필드 (password 및 password_confirm)에 별표가있는 사용자 비밀번호가 포함되어 있기 때문입니다.jqGrid 암호 확인

아무 문제가 없지만 편집시 두 필드를 모두 비우고 값이 들어있는 경우에만 유효성을 검사하는 것이 좋습니다.

COLNAMES : [ "이름", "이름", "이메일", "암호", "비밀번호 확인"],

colModel : [{이름 : "이름이 코드의 일부입니다 "인덱스 :"이름 ", 편집 : 사실, editrules은 : {필수 : 사실}}

다른 분야 ....

{이름 :"암호 ", 인덱스 :"비밀번호 " 편집 가능 : true, edittype : "password", 숨김 : true, editrules : {edithidden : true, 필수 : ​​true}}, {name : "confirm_password", index : "confirm_password "편집 : 사실, 편집 유형 :"비밀번호 ", 숨김 : 참, 편집 규칙 : {편집 : 사실, 필수 : ​​참}},

2 개의 객체를 정의 했으므로 비밀 번호 및 확인을위한 또 하나의 내가 그리드를 채울 때, 나는 두 필드에 동일한 값을 반환합니다.

더 나은 구현을위한 어떤 생각?

고마워요.

답변

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]); 
    } 

우리는 키를 이동하기 전에 :

우리가 정의하는 첫 번째 함수는 암호 확인 필드를 만들고 원래의 암호 필드에 추가 할 것입니다 하나 : 두 암호가 일치하는지 확인하는 암호입니다.

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 
    } 
    }, 
.... 
.... 

모든 사람을의 그!

Fabio