Heim >Web-Frontend >js-Tutorial >Detailliertes Beispiel für die Bootstrap-Formularvalidierung formValidation
In diesem Artikel wird hauptsächlich die Bootstrap-Formularvalidierung vorgestellt, um die dynamische Formularvalidierungsfunktion zu implementieren. Freunde, die sie benötigen, können sich auf das Bootstrap-Tutorial
Dynamisches Hinzufügen beziehen Eingabe und dynamisch Neue Verifizierungsmethode hinzufügen!
Init-Status:
Nach dem Klicken auf „+“:
Nach der Überprüfung:
Wissenspunkte:
1 Gehen Sie zunächst zum Herunterladen auf die offizielle Website: formvalidation.io/
2. Importieren Sie die Datei. Ich werde nicht näher auf die Vorsichtsmaßnahmen eingehen, die ich bereits im Artikel zur Fernüberprüfung erwähnt habe.
3 Verwendete Schlüsselwörter: addField, removeField, different
4 Beachten Sie, dass die Namen der Beispiele auf der offiziellen Website unterschiedlich sind. Ich bin hier etwas faul. Und wenn das Projekt Ajax ist, wird das Formular nicht für die Übermittlung verwendet, sondern als JSON selbst übermittelt, sodass die Namen von x und y denselben Namen haben.
Ein guter Anfang:
Zuerst muss es im HTML ein „+“ geben, markiert als addPos, und dann muss es ein „-“ geben, markiert als „removPos,
<p id="posXY" class=" panel panel-default ">
<!-- 添加-->
<p class="panel-heading" >设置车库xy坐标</p>
<p class="addPos form-group">
<p class="col-lg-4 col-sm-4 col-xs-4" >
<input type="text" class="form-control text-left" name="garageNo" placeholder="停车库" style="min-width: 150px"/>
</p>
<p class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posX" placeholder="X"/>
</p>
<p class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posY" placeholder="Y"/>
</p>
<p class="col-lg-2 col-sm-2 col-xs-2" >
<button type="button" class="btn btn-default addButtonPos"><i class="glyphicon glyphicon-plus"></i></button>
</p>
</p>
<!-- 删除 -->
<p class="removPos form-group hide" id="posTemplate">
<p class="col-lg-4 col-sm-4 col-xs-4" >
<input type="text" class="form-control text-left" name="garageNo" placeholder="停车库" style="min-width: 150px"/>
</p>
<p class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posX" placeholder="X"/>
</p>
<p class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posY" placeholder="Y"/>
</p>
<p class="col-lg-2 col-sm-2 col-xs-2" >
<button type="button" class="btn btn-default removeButtonPos"><i class="glyphicon glyphicon-minus"></i></button>
</p>
</p>
</p>Dann kommen Sie zu js:
/**
* pos添加
* @param $that
*/
function addButtonPosClick($that){
var panelId = $that.parents(".topTemplate").attr("id");
var $form=$('#'+panelId+"form")
// defaultPanel(panelId)
var bookIndex=typeObj[panelId]++;
console.log(panelId,bookIndex)
var $template = $('#'+panelId+' #posTemplate'),
$clone =$template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('step',bookIndex)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="garageNo"]').attr({"step":bookIndex,"name":"garageNo"+bookIndex})
.click(function(){
clickBindGarageNo(panelId,bookIndex)
}).end()
.find('[name="posX"]').attr("step",bookIndex).end()
.find('[name="posY"]').attr("step",bookIndex).end()
// Add new fields
// Note that we also pass the validator rules for new field as the third parameter
// $('#defaultForm')
// gFieldArr.push(panelId+'[' + bookIndex + '].garageNo')
$form
.formValidation('addField', "garageNo"+bookIndex, formObj.sameAs(false))
.formValidation('addField', 'posX', myPosXY)
.formValidation('addField', 'posY', myPosXY)
}
function myFormValidation($form){
// var $form=$("#"+$panelId+"form")
$form
.formValidation({
framework: 'bootstrap',
locale: 'zh_CN',
message: '值无效',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:
{
myimg:{
validators: {
notEmpty: {
message: '请选择一个文件上传'
},
file: {
extension: 'jpeg,jpg,png',
type: 'image/jpeg,image/png',
maxSize: 1*1024 * 1024,
message: '该文件必须为jpeg,jpg,png格式和必须不超过1MB的大小'
}
}
}
}
})
.on('click', '.addButtonPos', function() {
addButtonPosClick($(this))
})
//Remove button click handler
.on('click', '.removeButtonPos', function() {
var $that = $(this)
var panelId = $that.parents(".topTemplate").attr("id");
// defaultPanel(panelId)
var $row = $(this).parents('.form-group'),
index = $row.attr('step');
// var myname='[' +index + ']'
var bookIndex= typeObj[panelId]--;
// $('#defaultForm')
$form
.formValidation('removeField', $row.find('[name="garageNo'+bookIndex+'"]'))
.formValidation('removeField', $row.find('[name="posX"]'))
.formValidation('removeField', $row.find('[name="posY"]'))
// Remove element containing the fields
$row.remove();
})Da mein Projekt mehrere Formulareinreichungen hat, das Geschäft aber ähnlich ist, verwende ich diese Funktionen
Zum Beispiel: var form=(“#”+panelId+”form”) Verwenden Sie panelId. Der Unterschied besteht darin, dass es mehrere Formen gibt.
Wie oben erwähnt, sind die Namen von x und y gleich, aber wenn Sie vorsichtig sind, werden Sie feststellen, dass der Name von garageNo unterschiedlich ist . Warum?
String des Namens der garageNo, den ich durchlaufen habe.
Zum Beispiel: Es gibt 3 Einträge, idx =1 und der Fokus liegt auf 1. Dann diffArr=["garageNo0","garageNo2",]var differentValid= function(diffstr){
var vv={
validators: {
different: {
field: diffstr,
message: '不能有相同的停车库'
}
}
}
return vv
} Beachten Sie einen Fehler: Wenn Sie viele Eingaben verwenden, werden Sie Sie werden feststellen, dass die Eingabe manchmal nicht automatisch überprüft wird. Wenn Sie beispielsweise das Datums-Plugin verwenden, wird die Eingabe nicht überprüft. Zu diesem Zeitpunkt müssen Sie den oben genannten Code zuerst überprüfen eine neue Validierungsmethode und validiert dann das gesamte Formular. Wenn Sie nur eine Eingabe validieren möchten, verwenden Sie bitte: clickBindGarageNo(panelId,idx){
$form.formValidation('addField', "garageNo"+idx, differentValid(diffArr.toString()))
var fv =$form.data('formValidation');
fv.validate();
}Es gibt auch ein Detail zur Übermittlung:
Wenn wir dies nicht tun. Wenn Sie keinen Senden-Button festlegen, wird dieses Plugin die Seite automatisch für Sie senden, wenn Ihr Übermittlungsdienst fehlschlägt.Aber manchmal tun wir das nicht. Ich möchte nicht, dass es aktualisiert wird.
Ich verwende lieber eine Schaltfläche im Formular und dann:
[Verwandte Empfehlungen]$form.formValidation('revalidateField', "field");
1.
Kostenloses Javascript-Video-TutorialDetaillierte Beispiele für häufig verwendete Middleware-Body-Parser in Nodejs
3 Code für die Implementierung von JavaScript-Formularen$btn.click(function(){
//....
retrun false;
)}4. Einzeiliges JS implementiert die Prüfung des mobilen Geldformats5. Beispiel für die Formularsteuerungsbindung von Vue Tutorial
Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Bootstrap-Formularvalidierung formValidation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!