Maison >interface Web >js tutoriel >Exemple détaillé de formulaire de validation de formulaire BootstrapformValidation
Cet article présente principalement le formulaire de validation de formulaire BootstrapformValidation pour implémenter la fonction de validation dynamique du formulaire. Les amis qui en ont besoin peuvent se référer au Tutoriel Bootstrap
Ajouter dynamiquement. saisie et ajout dynamique d'une nouvelle méthode de vérification !
statut d'initialisation :
Après avoir cliqué sur "+" :
Après vérification :
Points de connaissance :
1 Allez d'abord sur le site officiel pour télécharger : formvalidation.io/
2. Lors de l’importation de fichiers, je n’entrerai pas dans les détails des précautions que j’ai déjà évoquées dans l’article sur la vérification à distance.
3 Mots clés utilisés : addField, RemoveField, Different
4 A noter que les noms des exemples sur le site officiel sont différents. Je suis un peu paresseux ici. Et lorsque le projet est ajaxé, il n'est pas soumis à l'aide du formulaire, mais est soumis lui-même en tant que json, donc les noms de x et y ont le même nom.
Un bon début :
Tout d'abord, il doit y avoir un "+" dans le code HTML, marqué comme addPos, et ensuite il doit y avoir un "-" marqué comme "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>
Alors venez à 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(); })
Parce que mon projet comporte plusieurs soumissions de formulaires, mais que le métier est similaire, j'utilise ces fonctions
Par exemple : var form=(“#”+panelId+”form”)
utilisez panelId. La différence est qu'il existe plusieurs formulaires
Comme mentionné ci-dessus, les noms de x et y sont les mêmes, mais si vous faites attention, vous constaterez que le nom de garageNo est différent. . Pourquoi ?
garageNo ne peuvent pas être identiques : 🎜>
Lorsque l'utilisateur saisit la valeur de. garageNo :var differentValid= function(diffstr){ var vv={ validators: { different: { field: diffstr, message: '不能有相同的停车库' } } } return vv }Qu'est-ce que ce diffArr.toString() ? C'est la chaîne
du nom du garageNo que j'ai parcouru
Par exemple : il y a 3 entrées, idx. =1 et le focus est sur 1. Ensuite diffArr=["garageNo0","garageNo2",]clickBindGarageNo(panelId,idx){ $form.formValidation('addField', "garageNo"+idx, differentValid(diffArr.toString())) var fv =$form.data('formValidation'); fv.validate(); }Notez un bug : si vous utilisez beaucoup d'entrées, vous constatera que parfois l'entrée n'est pas automatiquement vérifiée. Par exemple, lorsque vous utilisez le plug-in de date pour cliquer sur la date, l'entrée n'est pas vérifiée. À ce stade, vous devez d'abord vérifier manuellement ce qui précède. une nouvelle méthode de validation puis valide l'ensemble du formulaire. Si vous souhaitez simplement valider une saisie, veuillez utiliser : Il y a également un détail sur la soumission : Lorsque nous ne le faisons pas. Si vous ne définissez pas de bouton de soumission, ce plugin le soumettra automatiquement pour vous. Mais vous constaterez également que si votre service de soumission échoue, votre page deviendra une page 404. ou une autre page d'erreur Mais parfois nous ne le faisons pas. Je ne veux pas qu'il soit actualisé. Que dois-je faire ?
$form.formValidation('revalidateField', "field");
Je préfère en utiliser un.
1.
Tutoriel vidéo gratuit Javascript2
Exemples détaillés d'analyseur de corps middleware couramment utilisé dans Nodejs$btn.click(function(){ //.... retrun false; )}3. Compétences code_javascript de mise en œuvre de la vérification du formulaire JavaScriptJS à ligne unique implémente l'inspection du format d'argent du terminal mobileLiaison de contrôle de formulaire Vue v-model. exemple de tutoriel
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!