onclickイベントは複数の関数を参照しています

私はhtml形式を書いています。私のサブミットボタンのコードの中で、 "onclick"を使って2つのJavascript関数を参照していますが、どういうわけか、どちらかから警告メッセージを受け取っていません。関数「notEmpty」は、フォームフィールドのいずれかが空の場合、警告メッセージを表示します。入力された電話番号が XXX-XXX-XXXXの形式でない場合、関数「VerifyPhoneNumber」がユーザーに通知します。（X桁を意味する）onclickイベントは複数の関数を参照しています

コードは以下である：

<html> 
<head> 
<script type='text/javascript'> 
    function notEmpty(elementone, elementtwo, elementthree, helperMsg){ 
    if(elementone.value.length == 0 || elementtwo.value.length == 0 || elementthree.value.length == 0){ 
     alert(helperMsg); 
     elem.focus(); 
     return false; 
    } 
     return true; 
    } 

    function VerifyPhoneNumber(number, errormessage){ 
     for(int i=0; i < number.toString().length; i++){ 
      var space = number.substr(i,1); 
       var type = isNaN(space); 
       if (type != false){ 
        if (space != '-' && i != 4 && i != 8){ 
         alert(errormessage); 
         elem.focus(); 
         return false; 
        } 
       } 
     } 
     return true; 
    } 

</script> 

</head> 

<body> 

<p>Please input the following information:</p> 

<form method="post" onSubmit="return formValidator()"> 

Name: 
<input type="text" id="name"> 
Address: 
<input type="text" id="address"> 
Phone Number: 
<input type="text" id="phonenumber"> 
<input type="submit" onclick="notEmpty(document.getElementById('name'), document.getElementById('address'), document.getElementById('phonenumber'), 'one or more of the question fields seems to be empty'); VerifyPhoneNumber(document.getElementById('phonenumber'), 'that is not a complete phonenumber');"> 
</form> 

</body> 

</html>

出典

2017-11-28 classic_man

<html> 
<head> 
    <title>Add Your Page Title here</title> 
    <meta charset="utf-8"> 
</head> 
<body> 
<p>Please input the following information:</p> 

<form method="post"> 
    Name: 
    <input type="text" id="name"> 
    Address: 
    <input type="text" id="address"> 
    Phone Number: 
    <input type="text" id="phonenumber"> 
    <input type="button" id="submitButton" value="Submit me"> 
</form> 

<script type='text/javascript'> 
    /** 
    * @param elements {Array<HTMLElement>} 
    * @param helperMsg {String} 
    * @returns {boolean} 
    */ 
    function notEmpty(elements, helperMsg) { 
     for (var i = 0, len = elements.length; i < len; i++) { 
     if (elements[i].value === '') { 
      alert(helperMsg); 
      elements[i].focus(); 
      return false; 
     } 
     } 
     return true; 
    } 

    /** 
    * @param el {Element} 
    * @param errorMessage {String} 
    * @returns {boolean} 
    */ 
    function verifyPhoneNumber(el, errorMessage) { 
     var regex = /^([0-9]){8}$/; //this regex pattern will match any string with at least 8 digits only 
     if (!el.value.match(regex)) { 
     alert(errorMessage); 
     el.focus(); 
     return false; 
     } 
     return true; 
    } 

    //keep your code "DRY" 
    //don't repeat yourself 
    var els   = [], 
     submitButton = document.getElementById("submitButton"), 
     names  = ['name', 'address', 'phonenumber']; 

    for (var i = 0, len = names.length; i < len; i++) { 
     els.push(document.getElementById(names[i])); 
    } 

    //we can now free the memory spaces housing our name array 
    //since we don't need it again 
    names = null; 

    submitButton.addEventListener("click", function (event) { 
     //if this function goes through, the one below will be called 
     //no need to add two event listeners 
     notEmpty(els, 'one or more of the question fields seems to be empty'); 

     verifyPhoneNumber(els[2], 'that is not a complete phonenumber'); 
    }); 

</script> 
</body> 
</html>

出典

2017-11-28 04:20:59

onclickイベントは複数の関数を参照しています

答えて

関連する問題