0

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

1 回答 1

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

In this case, you can add extra things to each object, to allow for specific validation rules, such as not being empty, at least a certain length, no longer than a certain length, etc. ...and in the loop, you'd have to check for those things being present.

于 2012-09-16T22:38:29.037 回答