onclick 이벤트가 여러 함수를 참조합니다

나는 html 양식을 쓰고 있습니다. 내 제출 버튼의 코드에서 "onclick"을 사용하여 두 개의 자바 스크립트 함수에 대한 참조를 만들었습니다. 어쨌든 나는 의도 한대로 경고 메시지를받지 못합니다. 기능 "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 이벤트가 여러 함수를 참조합니다

답변

관련 문제