用于发布表单输入值的 Javascript 函数

如何解决用于发布表单输入值的 Javascript 函数

我有一个管理密码更改请求的 PHP 页面，我无法调用 javascript 函数来检查新密码是否至少有一个特殊字符，然后再次调用同一页面让 PHP 更新数据库的密码字段。

这是我的 html：

<form name="changePassword" onsubmit="return CheckPassword()" method="post"
      accept-charset="utf-8">
  Current Password:
  <input name="currPwd" type="password" size="40" maxlength="200" id="currPwd"
         placeholder="Current Password" required/>

  New Password:
  <input name="newPwd" type="password" size="40" maxlength="200" id="newPwd"
         placeholder="New Password" required/>

  Repeat New password:
  <input name="rNewPwd" type="password" size="40" maxlength="200" id="rNewPwd"
         placeholder="Repeat New Password" required/>

  <input type="submit" id="changepsw" value="Change Password"/>
</form>

这是我的 javascript 代码：

function CheckPassword () {
  var pass1 = document.getElementById('newPwd');
  var pass2 = document.getElementById('rNewPwd');
  var isOk = true;

  var res1 = /^(?=.*[ -\/:-@\[-_])([\w -\/]).+$/.test(pass1);
  var res2 = /^(?=.*[ -\/:-@\[-_])([\w -\/]).+$/.test(pass2);

  if ((res1 == false) || (res2 == false)) {
    isOk = false;
  } else {
    $.ajax({
      type: 'POST',url: 'updatepswd.PHP',data: $'form'.serialize()
    });
  }
  return isOk;

}

点击提交按钮，它应该调用 js 函数，应该检查密码是否至少包含一个特殊字符，然后调用 PHP 进行更新，但会发生的是，即使密码没有，它也会调用 PHP 页面'没有任何特殊字符。

我是否遗漏了什么或做错了什么？

---

编辑：

在测试函数中使用它时，我也没有使用jquery将.value添加到密码字段中：

var res1 = /^(?=.*[ -\/:-@\[-_])([\w -\/]).+$/.test(pass1.value);

我没有使用 ajax，而是：

document.changePassword.submit();

解决方法

function Test(password) {
    var regex = [
        /[\W]+/,// I check for the presence of at least one special character 
        /[a-z]+/,// I check for at least one lowercase letter 
        /[A-Z]+/,// I verify the presence of at least one capital letter 
        /[\d]+/ // I verify the presence of at least one number 
    ];
    for (var i = 0; regex[i]; i++) {
        if (!regex[i].test(password)) return false;
    }
    return true;
}

function Send() {
    var psw1 = $('#newPwd').val();
    var psw2 = $('#rNewPwd').val();
    if (Test(psw1) && psw1 === psw2) {
        alert('OK!');
        /*
        $.ajax({
            type: 'POST',url: 'updatepswd.php',data: $('form').serialize()
        });
        */
    } else alert('ERROR!');
}

$(function() {
    $('#changepsw').click(Send);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form name="changePassword" onsubmit="return false;" method="post" accept-charset="utf-8">
        Current Password:
        <input name="currPwd" type="password" size="40" maxlength="200" id="currPwd" placeholder="Current Password" required/>

        New Password:
        <input name="newPwd" type="password" size="40" maxlength="200" id="newPwd" placeholder="New Password" required/>

        Repeat New password:
        <input name="rNewPwd" type="password" size="40" maxlength="200" id="rNewPwd" placeholder="Repeat New Password" required/>

        <input type="submit" id="changepsw" value="Change Password"/>
    </form>

嗯，你使用的正则表达式对我来说似乎不是最好的，但是我通常使用这个网站来编写它们：https://www.debuggex.com/

但是，回到我们，通常是为了检查用户输入的密码，我使用这个小函数，仅当输入的正则表达式都正确时才返回 TRUE：

function Test(password){
    var regex =[
            /[\W]+/,// I check for the presence of at least one special character 
            /[a-z]+/,// I check for at least one lowercase letter 
            /[A-Z]+/,// I verify the presence of at least one capital letter 
            /[\d]+/  // I verify the presence of at least one number 
        ];
    for(var i = 0; regex[i]; i++){
        if(!regex[i].test(password)) return false;
    }
    return true;
}

我还注意到要读取您使用的用户输入的密码：

var pass2 = document.getElementById("rNewPwd"); 

但是这样做你会得到 THE ITEM，而不是它包含的文本，对吧？因此 TEST 函数在所有情况下都会失败。

如果我可以建议您，获取输入值的简单方法是：

var data = $('#your_ID').val();

或

var data = $('.your_class').val();

我希望我有帮助.. :)