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

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 に答える
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 に答える