使用具有相同 javascript 函数的不同变量答案

【问题标题】：Using different variables with the same javascript function使用具有相同 javascript 函数的不同变量
【发布时间】：2012-09-16 22:29:02
【问题描述】：

我正在尝试创建一个通用的 Javascript 函数，我可以使用它来验证不同的字段值并在正确的字段旁边输出错误消息。我想创建一个高效、可重用的函数，但我是 Javascript 新手，不知道如何继续。

建议您如何更改我的验证功能以验证firstname 和lastname。

到目前为止我的代码：

function validateForm() {
    var x = document.forms["myForm"]["firstname"].value;
    var reg_azs = /^[^a-zA-Z\-']+$/;
    var reg_oal = "!#$%^&*()+=[]\\\';,{}|\":<>?123456790";

    if (x == null || x == "") {
        document.getElementById("fn").innerHTML = "This fuild is required.";
        return false;
    } else if (reg_azs.test(firstname.value)) {
        document.getElementById("fn").innerHTML = "Only alphabetic letters.";
        return false;
    } else {
        for (var i = 0; i < x.length; i++) {
            if (reg_oal.indexOf(x.charAt(i)) != -1) {
                document.getElementById("fn").innerHTML = "Only alphabetic letters.";
                return false;
            }
        }
    } else {
        document.getElementById("fn").innerHTML = "correct";
        return true;
    }
}

我的表格：

<form name="myForm" action="connection.php" method="post">
    <label for='firstname'>First Name:</label>
    <input type="text" id="firstname" name="firstname" onchange="return validateForm()" />
    <err1 id="fn"></err1>
    <br>  

    <label for='lastname'>Last Name:</label>
    <input type="text" id="lastname" name="lastname" onchange="return validateForm()" />
    <err1 id="ln"></err1>
    <br>
</form>

【问题讨论】：

html 无效，因为标准中没有指定err1 标签。
检查我对这个问题的回答stackoverflow.com/questions/12434948/…，它可能有助于保持干燥。
“更少的代码”并不意味着“更快”。很多时候，将代码缩写到混淆的程度会使其速度变慢，当然也更难维护。
将某人的姓名限制为 ASCII 字母是个坏主意。除了数十亿人用中文拼写自己的名字外，全世界还有数十亿O'Shays和O'Shanters为无法正确输入他们的名字而烦恼。这种限制通常是基本糟糕设计的标志。

标签： javascript forms function variables verify

【解决方案1】：

我会让函数接受一些参数：被检查元素的id，显示错误消息的元素的id，然后可能是一个正则表达式字符串来验证它（可能是可选的） .

从那里，您可以将x 设置为：

var x=document.getElementById(param1).value;

每次你引用错误元素时，像这样：

document.getElementById("fn")

改成：

document.getElementById(param2)

所以你的函数声明应该是这样的：

function validateForm(param1, param2) {

当你调用它时，它看起来像：

onchange="return validateForm('firstname', 'fn');"
onchange="return validateForm('lastname', 'ln');"

等等。

您可能还想更改参数名称，param1 和 param2 只是示例，可能分别为 targetElem 和 errorLabel 更好。

更新：

这种设计也是狭隘的，因此您必须为要验证的每个元素调用validateForm。另一种方法是，允许通过一个函数调用验证多个元素是使用对象数组，其中每个对象具有如下形式：

{"element_id": "whatever", "error_id": "whatever"}

但是在你的函数中，你会遍历单个参数（一个数组），然后像这样访问每个参数：

for (var i = 0; i < param1.length; i++) {
    // Use param1[i]["element_id"] and param1[i]["error_id"]
}

在这种情况下，您可以为每个对象添加额外的东西，以允许特定的验证规则，例如不为空、至少一定长度、不超过一定长度等......并且在循环，你必须检查这些东西是否存在。

【讨论】：