0

这是我的示例代码，其中我有 2 个需要相同验证的文本框。如何为需要相同验证的两个文本框编写一个函数。这是我的代码：

<!DOCTYPE html>
<html>

<title>Home</title>

<body style="background-color:#708090;">

<script type="text/javascript" >


function a() {
    var ay = document.getElementById("ayear").value;

var pattern = /\d{4}-\d{2,4}/;


    if(pattern.test(ay))

    {

    ay.style.backgroundColor="#52F40C";
    return true;
        } 
    else 
    {
        window.alert ("Enter the correct acadamic year");
    ay.style.backgroundColor="#F40C0C";
     ay.focus();
         ay.value="";        
     return false;

    }
}


function b() {

var fy=document.getElementById("fyear").value;
var fpattern = /\d{4}-\d{2,4}/;


  if(fpattern.test(fy))
    {

    fy.style.backgroundColor="#52F40C";
    return true;
        } 
    else 
    {
        window.alert ("Enter the correct financial year");
    fy.style.backgroundColor="#F40C0C";
        fy.focus();
        fy.value="";
    return false;

    }
}

function c()
{


    var n=document.getElementById("name");

    var re=/^[a-zA-Z]+ ?[a-zA-Z]*$/;

    if(re.test(n.value))
    {

               n.style.backgroundColor="#52F40C";
    }
    else
    {
        window.alert("Invalid place name");
               n.style.backgroundColor="#F40C0C";
               n.focus();
               n.value="";

    }
}


</script>





</p>
<h3 style="font-family:Verdana">Notes</h3>

<h4 "style="font-family:Verdana;text-align:center;"><b><u>Declaration</u></b></h4>

<form   method="post">

<p> This  Report is prepared for the Current Acadamic Year(<input type="text" size="9"  id="ayear" onchange=a();>) and the Current Financial Year (<input type="text" size="9"  id="fyear" onchange=b();>) on behalf of the Institution.</p>




</form>

</body>
</html>

`

在代码函数 a 和 b 中进行相同的验证，所以我可以将 2 个函数减少到 1 个吗？请帮助我，我是一个新手，以后需要做一个更大的逻辑

4

4 回答 4

0

这是一个好问题，你应该很高兴它让你担心到足以问:)

为了减少代码重复，不仅仅是在 javascript 中，你应该总是问自己什么是通用的。在这种情况下，您可以简单地传递指示要验证哪个对象的参数。

例如：

    function a(elementId) {
        var ay = document.getElementById(elementId).value;
...
}

然后你就可以调用 a("ayear") 和 a("fyear")。

祝你好运！

于 2013-01-09T09:02:55.910 回答
0

你可以这样做

<input type="text" size="9"  id="ayear" onchange="a(this);" >

然后改变功能

function a(elem) {

var pattern = /\d{4}-\d{2,4}/;


    if(pattern.test(elem))

    {

    elem.style.backgroundColor="#52F40C";
    return true;
        } 
    else 
    {
        window.alert ("Enter the correct acadamic year");
    elem.style.backgroundColor="#F40C0C";
     elem.focus();
         elem.value="";        
     return false;

    }
}
于 2013-01-09T09:04:39.387 回答
0

更多可配置版本

function validator(obj, pattern, info, bgc, bgc2) {

  if(pattern.test(obj.value))
  {
    obj.style.backgroundColor=bgc;
    return true;
  } 
  else 
  {
    window.alert (info);
    obj.style.backgroundColor=bgc2;
    obj.focus();
    obj.value="";        
    return false;
  }
}

并在 html onchange() 中使用参数调用 fn 验证器：

<form method="post"> 
 <input type="text" size="9"  id="ayear" onchange="validator(this, /\d{4}-\d{2,4}/, 'Enter the correct acadamic year', '#52F40C', '#F40C0C');">
 ......
</form>
于 2013-01-09T09:40:28.790 回答
0

您可以将 id 作为参数传递，以便它适用于两种情况

function a(idname) {
    var ay = document.getElementById(idname).value;
    var element = document.getElementById(idname);//added object
    var pattern = /\d{4}-\d{2,4}/;

    if(pattern.test(ay)) {
       element.style.backgroundColor="#52F40C";
       return true;
    } else {

     window.alert ("Enter the correct acadamic year");
     element.style.backgroundColor="#F40C0C";
     element.focus();
     element.value="";        
     return false;

     }
}

要使上述功能正常工作，您需要在表单中进行以下更改

<form   method="post"> 
     <input type="text" size="9"  id="ayear" onchange="a('ayear');">
     <input type="text" size="9"  id="fyear" onchange="a('fyear');">
   </form>

演示

于 2013-01-09T09:02:26.363 回答