直接在表格字段中编辑数据

Question

我有以下PHP输出HTML表，其中每行包含密码输入。该表的要点是允许用户编辑这些密码。在每个密码输入元素上，有一个名为“pattern”的属性，我存储一个正则表达式。我想强制用户输入与此正则表达式匹配的密码，如果未验证密码则显示错误消息。

我怎样才能做到这一点？

我的PHP / HTML：

<?php 
$result = mysqli_query( $conn, "select id, password from user");
$num_rows = mysqli_num_rows($result); 
?>
<table>
    <tr>
        <th style="cursor:pointer">
            Password
        </th>
    </tr>
    <?php
while($row=mysqli_fetch_array($resa))
{
    ?><tr class="edit_tr" title="click to edit">
        <td class="edit_td" id="<?php echo $row['id']; ?>">
            <span id="password_<?php echo $row['id']; ?>" ></span>
            <input type="password" value="<?php echo $row['password']; ?>" data-pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"  class="editbox" id="password_input_<?php echo $row['id']; ?>"/>
        </td>
    </tr>
</table>

我的JavaScript：

$(document).ready(function() {

  $(".edit_td").click(function() {
        document.getElementById('user_insert').style.display = "none";

        var ID = $(this).attr('id');
        $("#password_" + ID).hide();
        $("#password_input_" + ID).show();

        {

          var ID = $(this).attr('id');
          var first = $("#password_input_" + ID).val();
          var dataString = 'id=' + ID + '&password=' + first
          if (first.length > {
              if (confirm('Are you sure to modify the password ?')) {
                $.ajax({

                  type: "POST",
                  url: "modify_password.php",
                  data: dataString,
                  cache: false,
                  success: function(html) {

                    $("#password_" + ID).html(first);
                  }
                });
              }
            } else {
              alert('don't let empty.');
              }

            });

          // Edit input box click action
          $(".editbox").mouseup(function() {
            return false
          });


          $(document).mouseup(function() {
            $(".editbox").hide();
            $(".text").show();

          });

        });

Answer 1

如果您的代码格式正确，您会遇到几个语法错误。抛开这一点，您需要从元素的pattern属性中获取模式并使用它创建正则表达式，然后使用它来尝试匹配用户输入。

这样可行：

将PHP行更改为<input type="password" value="<?php echo $row['password']; ?>" original-password="<?php echo $row['password']; ?>" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" class="editbox" id="password_input_<?php echo $row['id']; ?>"/>

Working jsFiddle

$(document).ready(function() {
  $('.edit_td').click(function() {
    var ID = $(this).attr('id');
    var $pswdInput = $('#password_input_' + ID);
    var $pswdSpan = $('#password_' + ID);
    $('#user_insert').hide();
    $pswdSpan.hide();
    $pswdInput.show();
    var ID = $(this).attr('id');
    var first = $pswdInput.val();
    var dataString = 'id=' + ID + '&password=' + first
    var regex = new RegExp($pswdInput.attr('pattern'));
    if (first.match(regex)) {
      if (confirm('Are you sure you want to modify the password ?')) {
        $.ajax({
          type: 'POST',
          url: 'modify_password.php',
          data: dataString,
          cache: false,
          success: function(html) {
            $pswdSpan.html(first);
          }
        });
      }
      else $pswdInput.val($pswdInput.attr('original-password')); // reset original password
    } 
    else {
      $pswdInput.val($pswdInput.attr('original-password'));
      alert('Invalid password provided'); // reset original password
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="password_1"></span>
<input type="password" value="somePassword1" original-password="somePassword1" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" class="editbox" id="password_input_1" />


<button class="edit_td" id="1">Edit password </button>

另外，我建议您更新正则表达式以禁止会破坏数据字符串的字符，或对输入进行编码/解码。

例如somePas&sword1将使用您当前的正则表达式进行验证，但&会破坏您的ajax调用。你需要禁止所有在URL中有意义的字符或使用var first = encodeURIComponent($pswdInput.val());然后在服务器上解码它以避免问题（更好的选择恕我直言）

确保您还验证服务器上的密码，因为仅此方法是不够的，因为用户可以在客户端轻松操作此密码，这应仅用于UX目的

Answer 2

这只是添加到当前代码的基本更改。虽然看起来有些语法与brackerts和东西不同。

 $(document).ready(function()
 {

 $(".edit_td").click(function()
 {
   var $this = ($this); //store current object
   var priorPassword = $(this).val();//so you cna use later

   document.getElementById('user_insert').style.display="none";
  var ID=$(this).attr('id');
  $("#password_"+ID).hide();
  $("#password_input_"+ID).show();

  var ID=$(this).attr('id');
  var first=$("#password_input_"+ID).val();
  var dataString = 'id='+ ID +'&password='+first

  if(first.length > 0)
  {
    if(confirm('Are you sure to modify the password ?')) {
    //validate password here.    

    $.ajax({
         type: "POST",
         url: "modify_password.php",
         data: dataString,
        cache: false,
        success: function(html)
        {
          $("#password_"+ID).html(first);
        }
    });
 }
 else
 {
    alert('don't let empty.');
  $(this).val(priorPassword);//sets it back to prior password
 }
});

  // Edit input box click action
 $(".editbox").mouseup(function()
   {
  return false
  });


  $(document).mouseup(function()
  {
 $(".editbox").hide();
  $(".text").show();

  });

  });