Javascript-Jquery 表单

Question

我在 HTML/JS 中开发了一个基本表单。 我使用 javascript 来检查我的字段。 但他们只在空时进行验证。 如果字段正确或无效，如果字段不正确，我如何验证我的表单。

也许我需要完成我的验证器函数（）。 但是怎么样？ 我有点失落;(

先感谢您 ！

JS：

 var regex = /[^a-zA-Z]/; var regex2 = /[^a-zA-Z_]/; $(document).ready(function () { var $nom = $('#name'), $prenom = $('#prenom'), $centre = $('#centre'), $magasin = $('#magasin'), $profil = $('#profil'), $date = $('#date'), $envoie = $('#envoie'), $erreur = $('#erreur'), $champ = $('.champ'); /* FONCTION REGEX */ $nom.keypress(function() { var color = regex.test(this.value) ? "red" : "green"; $(this).css({ borderColor: color, color: color }); }); $prenom.keypress(function() { var color = regex.test(this.value) ? "red" : "green"; $(this).css({ borderColor: color, color: color }); }); $profil.keypress(function() { var color = regex2.test(this.value) ? "red" : "green"; $(this).css({ borderColor: color, color: color }); }); /* AUTRES FONCTIONS */ function verifier(champ) { if (champ.val() == "") { $erreur.css('display', 'block'); champ.css({ borderColor: 'red', color: 'red' }); } } $envoie.click(function (e) { e.preventDefault(); verifier($nom); verifier($centre); verifier($magasin); verifier($profil); verifier($prenom); verifier($date); }); $centre.keypress(function () { if($(this).val().length > 2){ $(this).css({ borderColor: 'red', color: 'red' }); } else{ $(this).css({ borderColor: 'green', color: 'green' }); } }); $magasin.keypress(function () { if($(this).val().length > 2){ $(this).css({ borderColor: 'red', color: 'red' }); } else{ $(this).css({ borderColor: 'green', color: 'green' }); } }); $("#myForm").submit(function(e) { //e.preventDefault(); console.log("passage"); if ($("#myForm input.invalid").length > 0) { $("#logs").text("fail !"); return false; } $("#logs").text("success !") //return true; // laisse pour fonctionnement normal return false; }); });

Answer 1

验证字段可能是一个棘手的过程，要完全自己写出来。 我强烈推荐jQuery 验证插件。

它是这样工作的：

 $(document).ready(function () { $('#myform').validate({ rules: { fieldOne: { required: true, email: true }, fieldTwo: { required: true, minlength: 5 } } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> <form id="myform"> <input type="text" name="fieldOne"> <input type="text" name="fieldTwo"> <input type="submit" value="save"> </form>