Heim
Web-Frontend
js-Tutorial
Implementieren der Formularvalidierung basierend auf Bootstrap jQuery.validate_jquery
Web-Frontend
js-Tutorial
Implementieren der Formularvalidierung basierend auf Bootstrap jQuery.validate_jquery
Implementieren der Formularvalidierung basierend auf Bootstrap jQuery.validate_jquery
May 16, 2016 pm 04:26 PM
bootstrap
表单验证
Basierend auf der Bootstrap jQuery.validate Form-Formularvalidierungspraxis-Projektstruktur:
Quellcode-Adresse auf Github: https://github.com/starzou/front-end-example
1. Formular-Formularcode [html]
Code kopieren Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Form Template</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="plugins/bootstrap/css/bootstrap.css"/>
</head>
<body>
<div class="container">
<h1 class="text-center text-danger">Form 示例</h1>
<form role="form" class="form-horizontal" action="javascript:alert('验证成功,可以提交.');" method="post">
<div class="form-group">
<label class="col-md-2 control-label" for="name">Name</label>
<div class="col-md-10">
<input class="form-control" name="name" type="text" id="name" placeholder="Name" value="" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="exampleInputPassword1">Password</label>
<div class="col-md-10">
<input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="intro" class="control-label col-md-2">Intro</label>
<div class="col-md-10">
<textarea id="intro" class="form-control" rows="3" name="intro" placeholder="Intro"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Gender</label>
<div class="col-md-10">
<label class="radio-inline">
<input type="radio" name="gender" value="男" />
boy </label>
<label class="radio-inline">
<input type="radio" name="gender" value="女" />
gril </label>
</div>
</div>
<div class="form-group">
<label for="hobby" class="control-label col-md-2">Hobby</label>
<div class="col-md-10">
<div class="checkbox">
<label>
<input type="checkbox" name="hobby" value="Music">
Music</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="hobby" id="" value="Game" />
Game </label>
</div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1">
option1 </label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2">
option3</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3">
option3 </label>
</div>
</div>
<div class="form-group">
<label for="sel" class="control-label col-md-2">Select</label>
<div class="col-md-10">
<select multiple="" id="sel" name="sel" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-primary btn-sm">
Senden
</button>
<button type="reset" class="btn btn-primary btn-sm">
Zurücksetzen
</button>
</div>
</div>
</form>
</div>
<script src="plugins/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script src="plugins/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="plugins/jquery-validation/dist/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/form.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
MyValidator.init();
</script>
</body>
</html>
Sie können jquery.js,bootstrap.js,jquery.validate.js verwenden
2、form.js 代码[javascript]
复制代码 代码如下:
var MyValidator = function() {
var handleSubmit = function() {
$('.form-horizontal').validate({
errorElement: 'span',
errorClass: 'help-block',
focusInvalid: falsch,
Regeln: {
Name: {
Erforderlich: wahr
},
Passwort: {
Erforderlich: wahr
},
Einleitung: {
Erforderlich: wahr
}
},
Nachrichten: {
Name: {
erforderlich: „Benutzername ist erforderlich.“
},
Passwort: {
erforderlich: „Passwort ist erforderlich.“
},
Einleitung: {
erforderlich: „Einführung ist erforderlich.“
}
},
hervorheben: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
Erfolg: function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},
errorPlacement: function(error, element) {
element.parent('div').append(error);
},
commitHandler: function(form) {
form.submit();
}
});
$('.form-horizontal input').keypress(function(e) {
if (e.which == 13) {
If ($('.form-horizontal').validate().form()) {
$('.form-horizontal').submit();
return false; });
}
Geben Sie {
zurück init: function() {
handleSubmit(); };
}();
Wirkung:
Ein ziemlich guter Spezialeffekt für die Formularvalidierung. Ich kann ihn jedem empfehlen, der ihn in seinen eigenen Projekten verwenden kann.
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Heißer Artikel
Wie lange dauert es, um Split Fiction zu schlagen?
3 Wochen vor
By DDD
Repo: Wie man Teamkollegen wiederbelebt
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Hot-Tools-Tags
Heißer Artikel
Wie lange dauert es, um Split Fiction zu schlagen?
3 Wochen vor
By DDD
Repo: Wie man Teamkollegen wiederbelebt
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
So führen Sie Bootstrap in Eclipse ein
Apr 05, 2024 am 02:30 AM
So führen Sie Bootstrap in Eclipse ein
So führen Sie eine Idee in Bootstrap ein
Apr 05, 2024 am 02:33 AM
So führen Sie eine Idee in Bootstrap ein
Nach 750.000 Runden Einzelkampf zwischen großen Modellen gewann GPT-4 die Meisterschaft und Llama 3 belegte den fünften Platz
Apr 23, 2024 pm 03:28 PM
Nach 750.000 Runden Einzelkampf zwischen großen Modellen gewann GPT-4 die Meisterschaft und Llama 3 belegte den fünften Platz
So lesen Sie die Ergebnisse des Bootstrap-Mediation-Effekt-Tests in Stata
Apr 05, 2024 am 01:48 AM
So lesen Sie die Ergebnisse des Bootstrap-Mediation-Effekt-Tests in Stata
Was ist der Unterschied zwischen Bootstrap und Springboot?
Apr 05, 2024 am 04:00 AM
Was ist der Unterschied zwischen Bootstrap und Springboot?
So lesen Sie die Ergebnisse des Bootstrap-Mediation-Tests
Apr 05, 2024 am 03:30 AM
So lesen Sie die Ergebnisse des Bootstrap-Mediation-Tests
So verwenden Sie Bootstrap, um den Mediationseffekt zu testen
Apr 05, 2024 am 03:57 AM
So verwenden Sie Bootstrap, um den Mediationseffekt zu testen
So exportieren Sie die Ergebnisse des Befehls Bootstrap Test Mediation Effect Stata
Apr 05, 2024 am 03:39 AM
So exportieren Sie die Ergebnisse des Befehls Bootstrap Test Mediation Effect Stata
