Question

我一直在尝试使用JS OOP进行表单验证;我在Firefox和Chrome中测试了代码：两个浏览器都被冻结了。无论输入是否符合规定的正则表达式，他们都不会提交。那么，谁知道我错在哪里？请注意：我知道jQuery验证器存在，我也可以使用普通的JS，只要情况允许。在这里，我的兴趣是将JS OOP连接到DOM。到目前为止我读过的博客和教科书并没有真正向我展示如何将jS OOP连接到DOM脚本。所以，我只是在挖掘瓦砾，寻找出路。这段代码对我的电池造成了影响所以我决定在这里分享。

<form method = 'post' action ='somewhere.com' onsubmit = 'return formApp.validateInputs.apply(formApp);'>
<p>
Name: <input type = 'text' name = 'userName' id = 'userName'>
</p>
<p>
Phone: <input type = 'text' name = 'userPhone' id = 'userPhone'>
</p>
<input type = 'submit' id = 'sub' value = 'Submit Data'>
</form>

var formApp = {
    userNameReg: /[a-z0-9 ' _ ]+/gi,
    onlySpaceReg: /\s+/,
    phoneReg: /\d{3}/,
    userName: document.getElementById('userName').value,
    userPhone: document.getElementById('userPhone').value,
    error: [],
    reportError: function () {
        for (var i = 0; i < this.error.length; i++) {
            alert(this.error[i] + '\n')
        }
    },
    validateInputs: function () {
        if (!this.userNameReg.test(this.userName) || this.onlySpaceReg.test(this.userName)) {
            this.error.push['Name contains illegal character'];
            return false
        } // end name validation

        if (!this.phoneReg.test(this.userPhone)) {
            this.error.push['Only a three-digit number'];
            return false;
        } // end phone validation

        if (this.error.length > 0) {
            this.reportError();
            return false;
        }

        return true;
    } // end validateInputs
}; // end formApp obj

Answer 1

其中一个问题是您永远不会收到警报，因为您在添加错误的所有if块中从函数返回。所以“this.reportError（）;”永远不会被执行。从ifs中删除“return false”语句。

validateInputs: function () {
  if (!this.userNameReg.test(this.userName) || this.onlySpaceReg.test(this.userName)) {
    this.error.push['Name contains illegal character'];
  }// end name validation
  if (!this.phoneReg.test(this.userPhone)) {
    this.error.push['Only a three-digit number'];
  }// end phone validation
  if (this.error.length > 0) {
    this.reportError();
    return false;
  }
  return true;
}

使用JavaScript面向对象的方法验证表单

1 个答案: