Question

我正在尝试以jqGrid形式创建密码确认输入，但我相信我这样做是错误的。原因是在我的实现中，当您编辑已定义的用户时，两个字段（password和password_confirm）都包含带星号的用户密码。

这没有任何问题，但我相信编辑时两个字段都是空的更好，并且只有当它们包含值时才验证它们。这是代码的一部分：

colNames：[“姓名”，“用户名”，“电子邮件”，“密码”，“确认密码”]，

colModel：[{name：“name”，index：“name”，editable：true，editrules：{required：true}}，

其他字段 ....

{name：“password”，index：“password”，editable：true，edittype：“password”，hidden：true，editrules：{edithidden：true，required：true}}，   {名： “confirm_password”，索引： “confirm_password”，编辑：真，edittype： “密码”，隐藏的：真，editrules：{edithidden：真，需要：真}}，

正如您所看到的，我已经定义了2个对象，一个用于实际密码，另一个用于确认，当我填充网格时，我返回两个字段的值相同。

有关更好实施的想法吗？

非常感谢。

Answer 1

一直在寻找答案，我提出了自己的解决方案。我不想在数据库中添加一个字段 - 在我的情况下是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

jqGrid密码确认

1 个答案: