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>
答案 0 :(得分:1)