Während des Website-Entwicklungsprozesses müssen wir manchmal überprüfen, ob die vom Benutzer eingegebenen Informationen unseren Anforderungen entsprechen, daher überprüfen wir die vom Benutzer übermittelten Daten. Die Überprüfung wird zweimal durchgeführt, einmal auf der Clientseite und einmal auf der Serverseite. Die clientseitige Verifizierung kann das Benutzererlebnis verbessern.
Es gibt viele JQuery-Validierungs-Plug-Ins, die grundsätzlich dieselben Funktionen implementieren. In diesem Artikel wird nur jquery.validate
vorgestellt, eines der JQuery-Validierungs-Plug-Ins.jquery.Validation ist ein hervorragendes JQuery-Plug-In, das Client-Formulare validieren kann und viele anpassbare Eigenschaften und Methoden mit guter Skalierbarkeit bietet.
1.jquery.validate Plug-in-Funktion
Einfache Implementierung der Überprüfung von Kundeninformationen und Filterung von Informationen, die nicht den Anforderungen entsprechen
2.jquery.validate offizielle Adresse
Offizielle Adresse: http://jqueryvalidation.org/, mit detaillierten Anweisungen zur Plug-in-Nutzung
Offizielle Demo: http://jquery.bassistance.de/validate/demo/
3. So verwenden Sie jquery.validate
1. Zitieren Sie js
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.js"></script>
2.css-Stil, anpassbar, fügen Sie einfach einen Fehlerstil hinzu oder verwenden Sie den Stil in der offiziellen Demo.
.error{
color:red;
margin-left:8px;
}
3.js-Code
$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({
rules: {
firstname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
password_confirm: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true,
},
dateformat: "required",
terms: "required"
},
messages: {
firstname: "姓名不能为空",
username: {
required: "用户名不能为空",
minlength: jQuery.format("用户名只少由 {0} 字符组成")
},
password: {
required: "密码不能为空",
minlength: jQuery.format("密码只少由 {0} 字符组成")
},
password_confirm: {
required: "确认密码不能为空",
minlength: jQuery.format("确认密码只少由 {0} 字符组成"),
equalTo: "秘密与确认密码不一致"
},
email: {
required: "邮箱不能为空",
email: "邮箱格式不正确"
},
dateformat: "请选择性别",
terms: " "
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next().next());
else if ( element.is(":checkbox") )
error.appendTo ( element.next());
else
error.appendTo( element.parent().next());
},
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
},
highlight: function(element, errorClass) {
$(element).parent().next().find("." + errorClass).removeClass("checked");
}
});
});
Der obige Code verwendet nur die vom Plug-in bereitgestellten Eigenschaften und Methoden. Sie können auch die Überprüfungsmethode anpassen. Wie zum Beispiel
$.validator.addMethod("checkUserName", function(value) {
//value为验证的值，对应于元素id
//方法代码
}, '用户名格式不正确');
Die Verwendung benutzerdefinierter Methoden ist ebenfalls sehr einfach, einfach Element-ID: „checkUserName“
4. Verwendetes HTML
<form id="signupform" autocomplete="off" method="get" action="">
<table>
<tr>
<td class="label"><label id="lfirstname" for="firstname">姓名</label></td>
<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lusername" for="username">用户名</label></td>
<td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lpassword" for="password">密码</label></td>
<td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lpassword_confirm" for="password_confirm">确认密码</label></td>
<td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lemail" for="email">邮箱</label></td>
<td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label>性别</label></td>
<td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">
<table>
<tbody>
<tr>
<td style="padding-right: 5px;">
<input id="sex_men" name="dateformat" type="radio" value="0" />
<label id="lbl_sex_men" for="dateformat_eu">男</label>
</td>
<td style="padding-left: 5px;">
<input id="sex_women" name="dateformat" type="radio" value="1" />
<label id="lbl_sex_women" for="dateformat_am">女</label>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="label"> </td>
<td class="field" colspan="2">
<div id="termswrap">
<input id="terms" type="checkbox" name="terms" />
<label id="lterms" for="terms">以阅读并同意网站条款.</label>
</div> <!-- /termswrap -->
</td>
</tr>
<tr>
<td class="label"></td>
<td class="field" colspan="2">
<input id="signupsubmit" name="signup" type="submit" value="注册" />
</td>
</tr>
</table>
</form>
Weitere Anwendungen von Validierungsmethoden finden Sie unter http://jqueryvalidation.org/
Einführung in die Eigenschaften des virtuellen Raums
Verwendung des Python-Rückgabewerts
So nutzen Sie digitale Währungen
Was soll ich tun, wenn beim Einschalten des Computers englische Buchstaben angezeigt werden und der Computer nicht eingeschaltet werden kann?
Der Unterschied zwischen vue2.0 und 3.0
So wechseln Sie die Stadt auf Douyin
keine solche Dateilösung
So konfigurieren Sie das Standard-Gateway
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
