使用不同的变量具有相同的JavaScript功能

我想创建一个通用的Javascript函数，我可以使用它来验证不同的字段值并输出正确的字段旁边的错误消息。我想创建一个高效的，可重用的函数，但我是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>

来源

2012-09-16 Paul Bosch

html无效，因为标准中没有指定'err1'标签。 – Andreas

检查我对这个问题的答案http://stackoverflow.com/questions/12434948/textbox-validation-in-jquery/12435184#12435184，它可能有助于保持干爽。 – elclanrs

“较少的代码”并不意味着“更快”。通常，将代码缩短到混淆的程度使其变得更慢，并且更难以维护。 – RobG

我会做的函数接受几个参数：元素的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。

UPDATE：

这样的设计也是狭隘的，这样你必须调用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"] 
}

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

来源

2012-09-16 22:38:29 Ian

使用不同的变量具有相同的JavaScript功能

回答

相关问题