Question

HY！

在我的脚本中，我在表格中验证所有用户输入，如下面的代码。现在，对于像这样的小型表格，我认为它并不太多。

但是有没有其他“更好”或更少代码的方式，或者这是一个“noob”的方式？

工作正常，顺便说一句..

<!-- Originalwerte -->
			ori_edit_spitzname = $('#edit_spitzname').val();
			ori_edit_gebtag = $('#edit_gebtag').val();
			ori_edit_handy = $('#edit_handy').val();
			ori_edit_herkunft = $('#edit_herkunft').val();
		
			<!-- FORM PRÜFEN -->
			form_error = false;
			form_changed = false;
	
						// Spitzname 
						$('input[name=edit_spitzname]').change(function() {  
								if ($('#edit_spitzname').val().length > 0 && $('#edit_spitzname').val().length < 2) {
								alert("Spitzname muss leer, oder minimal 2 Buchstaben lang sein!");	
								$('#edit_spitzname').css({'color': 'red', 'border-color' : 'red'});
								$('#edit_spitzname').focus();
								form_error = true;
								} else {
								$('#edit_spitzname').css({'color': 'green', 'border-color' : 'green'});
								form_error = false;
								}
							is_changed_general();		
						 });
						 
						 // Geburtstag
						$('input[name=edit_gebtag]').change(function() {  
						  if (!validatebirthday($('#edit_gebtag').val(), ".")) {
								alert("Falsches Geburtstagsformat!\nDD.MM.YYYY");	
								$('#edit_gebtag').css({'color': 'red', 'border-color' : 'red'});
								$('#edit_gebtag').focus();
								form_error = true;
						} else {
								$('#edit_gebtag').css({'color': 'green', 'border-color' : 'green'});
								form_error = false;	}
							is_changed_general();		
						 });
						 
						  // Handynummer
						 $('input[name=edit_handy]').change(function() {  
						 alert($('#edit_handy').val().substr(0, 2));
						  if ($('#edit_handy').val().substr(0, 2)!="43") {
								alert("Handynummer MUSS mit 43 beginnen!\n43660123456");	
								$('#edit_handy').css({'color': 'red', 'border-color' : 'red'});
								$('#edit_handy').focus();
								form_error = true;
						} else {
								$('#edit_handy').css({'color': 'green', 'border-color' : 'green'});
								form_error = false;	}
							is_changed_general();		
						 });

						// Herkunft 
						$('input[name=edit_herkunft]').change(function() {  
								if ($('#edit_herkunft').val().length<4) {
								alert("Ein Herkunftsort muss angegeben werden! (Min 3 Buchstaben!)");	
								$('#edit_herkunft').css({'color': 'red', 'border-color' : 'red'});
								$('#edit_herkunft').focus();
								form_error = true;
								} else {
								$('#edit_herkunft').css({'color': 'green', 'border-color' : 'green'});
								form_error = false;
								}
							is_changed_general();		
						 });
						
						// Speichern-Button nur anzeigen wenn änderung und kein Fehler!
						function is_changed_general() {
						if (!form_error) {
							
							var general_changed = false; 
							
						if (ori_edit_spitzname!=$('#edit_spitzname').val()) { general_changed = true;  } 
							else { $('#edit_spitzname').css({'color': 'black', 'border-color' : '#404040'}); }
						if (ori_edit_gebtag!=$('#edit_gebtag').val()) { general_changed = true;  } 
							else { $('#edit_gebtag').css({'color': 'black', 'border-color' : '#404040'}); }
						if (ori_edit_handy!=$('#edit_handy').val()) { general_changed = true;  } 
							else { $('#edit_handy').css({'color': 'black', 'border-color' : '#404040'}); }
						if (ori_edit_herkunft!=$('#edit_herkunft').val()) { general_changed = true;  } 
							else { $('#edit_herkunft').css({'color': 'black', 'border-color' : '#404040'}); }
							
							if (general_changed) {
							// EINBLENDEN
							$('#gen_sendbutton').css('display', 'block');
							} else {
							// AUSBLENDEN
							$('#gen_sendbutton').css('display', 'none');
							}
						
						} else {
							// Ausblenden
							$('#gen_sendbutton').css('display', 'none');

						}
							general_changed = false;
						}
	
				// Wenn kein Fehler, Formular absenden
				function send_edit_general() {
						if (form_error==true) { alert("Bitte alle Eingaben prüfen!"); } else {
						alert("Daten würden jetzt gespeichert werden, alle Eingaben OK !");	
						}
				}

.memb_col {
	width:550px;
}

.memb_col_0 {
	width:550px;
	float:left;
	font-size:1.2em;
	font-style:italic;
}

.memb_col_0_1 {
	width:550px;
	float:left;
	padding-top: 10px;
}

.memb_col_1 {
	width:140px;
	float:left;
	padding-top: 6px;
	font-weight:bold;

}

.memb_col_2 {
	width:410px;
	float:left;
	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>
				</div>

Answer 1

您可以使用客户端表单验证库，例如http://jqueryvalidation.org/ 请阅读Best JavaScript solution for client-side form validation and interaction?了解详情。

“表单”的最佳方法 - 验证（Javascript）

1 个答案: