Question

我正在尝试创建一个通用的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>

Answer 1

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

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

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

每次引用error元素时都会这样：

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"]
}

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

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

1 个答案: