「Form」 - 驗證（Javascript）的最佳方法

Question

Hy！

在我的腳本中，我驗證了下面代碼中的窗體中的所有用戶輸入。 現在，對於這樣的小型表單，我認爲它不是太多。

但是，有沒有其他「更好」或更少代碼的方式做到這一點，或者這是否是「noob」？

它正常工作，順便說一句..

<!-- Originalwerte --> 
 
\t \t \t ori_edit_spitzname = $('#edit_spitzname').val(); 
 
\t \t \t ori_edit_gebtag = $('#edit_gebtag').val(); 
 
\t \t \t ori_edit_handy = $('#edit_handy').val(); 
 
\t \t \t ori_edit_herkunft = $('#edit_herkunft').val(); 
 
\t \t 
 
\t \t \t <!-- FORM PRÜFEN --> 
 
\t \t \t form_error = false; 
 
\t \t \t form_changed = false; 
 
\t 
 
\t \t \t \t \t \t // Spitzname 
 
\t \t \t \t \t \t $('input[name=edit_spitzname]').change(function() { 
 
\t \t \t \t \t \t \t \t if ($('#edit_spitzname').val().length > 0 && $('#edit_spitzname').val().length < 2) { 
 
\t \t \t \t \t \t \t \t alert("Spitzname muss leer, oder minimal 2 Buchstaben lang sein!"); \t 
 
\t \t \t \t \t \t \t \t $('#edit_spitzname').css({'color': 'red', 'border-color' : 'red'}); 
 
\t \t \t \t \t \t \t \t $('#edit_spitzname').focus(); 
 
\t \t \t \t \t \t \t \t form_error = true; 
 
\t \t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t $('#edit_spitzname').css({'color': 'green', 'border-color' : 'green'}); 
 
\t \t \t \t \t \t \t \t form_error = false; 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t is_changed_general(); \t \t 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t // Geburtstag 
 
\t \t \t \t \t \t $('input[name=edit_gebtag]').change(function() { 
 
\t \t \t \t \t \t if (!validatebirthday($('#edit_gebtag').val(), ".")) { 
 
\t \t \t \t \t \t \t \t alert("Falsches Geburtstagsformat!\nDD.MM.YYYY"); \t 
 
\t \t \t \t \t \t \t \t $('#edit_gebtag').css({'color': 'red', 'border-color' : 'red'}); 
 
\t \t \t \t \t \t \t \t $('#edit_gebtag').focus(); 
 
\t \t \t \t \t \t \t \t form_error = true; 
 
\t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t $('#edit_gebtag').css({'color': 'green', 'border-color' : 'green'}); 
 
\t \t \t \t \t \t \t \t form_error = false; \t } 
 
\t \t \t \t \t \t \t is_changed_general(); \t \t 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t // Handynummer 
 
\t \t \t \t \t \t $('input[name=edit_handy]').change(function() { 
 
\t \t \t \t \t \t alert($('#edit_handy').val().substr(0, 2)); 
 
\t \t \t \t \t \t if ($('#edit_handy').val().substr(0, 2)!="43") { 
 
\t \t \t \t \t \t \t \t alert("Handynummer MUSS mit 43 beginnen!\n4366"); \t 
 
\t \t \t \t \t \t \t \t $('#edit_handy').css({'color': 'red', 'border-color' : 'red'}); 
 
\t \t \t \t \t \t \t \t $('#edit_handy').focus(); 
 
\t \t \t \t \t \t \t \t form_error = true; 
 
\t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t $('#edit_handy').css({'color': 'green', 'border-color' : 'green'}); 
 
\t \t \t \t \t \t \t \t form_error = false; \t } 
 
\t \t \t \t \t \t \t is_changed_general(); \t \t 
 
\t \t \t \t \t \t }); 
 

 
\t \t \t \t \t \t // Herkunft 
 
\t \t \t \t \t \t $('input[name=edit_herkunft]').change(function() { 
 
\t \t \t \t \t \t \t \t if ($('#edit_herkunft').val().length<4) { 
 
\t \t \t \t \t \t \t \t alert("Ein Herkunftsort muss angegeben werden! (Min 3 Buchstaben!)"); \t 
 
\t \t \t \t \t \t \t \t $('#edit_herkunft').css({'color': 'red', 'border-color' : 'red'}); 
 
\t \t \t \t \t \t \t \t $('#edit_herkunft').focus(); 
 
\t \t \t \t \t \t \t \t form_error = true; 
 
\t \t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t $('#edit_herkunft').css({'color': 'green', 'border-color' : 'green'}); 
 
\t \t \t \t \t \t \t \t form_error = false; 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t is_changed_general(); \t \t 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t // Speichern-Button nur anzeigen wenn änderung und kein Fehler! 
 
\t \t \t \t \t \t function is_changed_general() { 
 
\t \t \t \t \t \t if (!form_error) { 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t var general_changed = false; 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t if (ori_edit_spitzname!=$('#edit_spitzname').val()) { general_changed = true; } 
 
\t \t \t \t \t \t \t else { $('#edit_spitzname').css({'color': 'black', 'border-color' : '#404040'}); } 
 
\t \t \t \t \t \t if (ori_edit_gebtag!=$('#edit_gebtag').val()) { general_changed = true; } 
 
\t \t \t \t \t \t \t else { $('#edit_gebtag').css({'color': 'black', 'border-color' : '#404040'}); } 
 
\t \t \t \t \t \t if (ori_edit_handy!=$('#edit_handy').val()) { general_changed = true; } 
 
\t \t \t \t \t \t \t else { $('#edit_handy').css({'color': 'black', 'border-color' : '#404040'}); } 
 
\t \t \t \t \t \t if (ori_edit_herkunft!=$('#edit_herkunft').val()) { general_changed = true; } 
 
\t \t \t \t \t \t \t else { $('#edit_herkunft').css({'color': 'black', 'border-color' : '#404040'}); } 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t if (general_changed) { 
 
\t \t \t \t \t \t \t // EINBLENDEN 
 
\t \t \t \t \t \t \t $('#gen_sendbutton').css('display', 'block'); 
 
\t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t // AUSBLENDEN 
 
\t \t \t \t \t \t \t $('#gen_sendbutton').css('display', 'none'); 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t // Ausblenden 
 
\t \t \t \t \t \t \t $('#gen_sendbutton').css('display', 'none'); 
 

 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t general_changed = false; 
 
\t \t \t \t \t \t } 
 
\t 
 
\t \t \t \t // Wenn kein Fehler, Formular absenden 
 
\t \t \t \t function send_edit_general() { 
 
\t \t \t \t \t \t if (form_error==true) { alert("Bitte alle Eingaben prüfen!"); } else { 
 
\t \t \t \t \t \t alert("Daten würden jetzt gespeichert werden, alle Eingaben OK !"); \t 
 
\t \t \t \t \t \t } 
 
\t \t \t \t } 
 

.memb_col { 
 
\t width:550px; 
 
} 
 

 
.memb_col_0 { 
 
\t width:550px; 
 
\t float:left; 
 
\t font-size:1.2em; 
 
\t font-style:italic; 
 
} 
 

 
.memb_col_0_1 { 
 
\t width:550px; 
 
\t float:left; 
 
\t padding-top: 10px; 
 
} 
 

 
.memb_col_1 { 
 
\t width:140px; 
 
\t float:left; 
 
\t padding-top: 6px; 
 
\t font-weight:bold; 
 

 
} 
 

 
.memb_col_2 { 
 
\t width:410px; 
 
\t float:left; 
 
\t padding-top: 6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 

 
<div class="memb_col clearfix"> 
 
        <div class="memb_col_0">Persönliches:<br></div> 
 

 
        <div class="memb_col_1">Vorname</div> 
 
        <div class="memb_col_2">Christoph</div> 
 
        
 
        <div class="memb_col_1">Nachname</div> 
 
        <div class="memb_col_2">Eder</div> 
 
    
 
        <div class="memb_col_1">Spitzname</div> 
 
        <div class="memb_col_2"><input type="text" name="edit_spitzname" id="edit_spitzname" value="" class="ui-widget ui-widget-content ui-corner-all"></div> 
 
        
 
        <div class="memb_col_1">Geburtstag</div> 
 
        <div class="memb_col_2"><input type="text" name="edit_gebtag" id="edit_gebtag" value="04.05.1990" class="ui-widget ui-widget-content ui-corner-all hasDatepicker"></div> 
 
        
 
        <div class="memb_col_1">Handynummer</div> 
 
        <div class="memb_col_2"><input type="text" name="edit_handy" id="edit_handy" value="4366123456789" class="ui-widget ui-widget-content ui-corner-all"></div> 
 
        
 
        <div class="memb_col_1">Telegram-ID</div> 
 
        <div class="memb_col_2">123456</div> 
 
        
 
        <div class="memb_col_1">Wohnort</div> 
 
        <div class="memb_col_2"><input type="text" name="edit_herkunft" id="edit_herkunft" value="Example City" class="ui-widget ui-widget-content ui-corner-all"></div> 
 
        
 
             
 
        <div class="memb_col_0"><br><input type="button" style="display:none;" id="gen_sendbutton" onclick="send_edit_general()" value="Änderungen speichern #dummy" class="ui-widget ui-widget-content ui-corner-all"></div> 
 
\t \t \t \t </div>

Answer 1

您可以使用客戶端表單驗證庫像http://jqueryvalidation.org/ 閱讀Best JavaScript solution for client-side form validation and interaction?瞭解更多詳情。