如何制作自定義驗證 javascript 表單？

Question

我想在我的表單上制作提交按鈕，這樣當用戶點擊它時，它會出現一個警告框，告訴他們他們沒有填寫的內容（這將使用 JavaScript 完成）我該如何制作?

我想使用http://tympanus.net/Development/ModalWindowEffects/ 中的“Flip in & scale”作為自定義警報框（然后會彈出用戶未填寫的內容）

我也想要它，所以它會檢查用戶是否以正確的格式輸入了正確的電子郵件，以及他們是否輸入了他們的姓名（不應包含數字）

謝謝。

Answer 1

<form id="myForm" method="post" action="/home"> // change the 'action' attribute to the link you want to post the form
    <input type="text" id="inputArea" onfocus="myFunc()">
    <span id="error" class="hide">Please enter a value</span>
    <button type="submit" id="myButton">Submit</button>
</form>

<script>
function myFunc(){
   var input = document.getElementById('inputArea');
   var button = document.getElementById('myButton');
   var span = document.getElementById('error');
   if(input.value == ''){
       span.className = errorMessage;
   } else if(input.value != ''){
        span.className = hide;
   }
}
</script>


    css:


.hide {display:none;}
.errorMessage {color:red;}

您甚至可以通過使用正則表達式對輸入進行更具體的處理，但那是另一回事了！