Javascript 验证后的表单重定向
因此,我在课堂上做了一个练习(没有发现其中的逻辑,但这没关系)。Javascript 验证后的表单重定向,javascript,jquery,forms,validation,redirect,Javascript,Jquery,Forms,Validation,Redirect,因此,我在课堂上做了一个练习(没有发现其中的逻辑,但这没关系)。 所有验证,如模式、必需、所有规则和消息,都是使用jqueryvalidate完成的,它运行得非常完美 问题是: 我有一个登录表单,当用户未注册时,我将用户重定向到一个完整的注册表单,问题是在注册、验证并检查所有字段是否已填写后,我不知道如何将用户重定向到“gallery.html”。 代码如下: HTML <form name="formulario_registro" id="formulario_registro"
所有验证,如模式、必需、所有规则和消息,都是使用jqueryvalidate完成的,它运行得非常完美
问题是: 我有一个登录表单,当用户未注册时,我将用户重定向到一个完整的注册表单,问题是在注册、验证并检查所有字段是否已填写后,我不知道如何将用户重定向到
“gallery.html”
。代码如下: HTML
<form name="formulario_registro" id="formulario_registro" action="" method="POST">
<label for="nif">NIF</label> <br>
<input type="text" name="nif" id="nif" placeholder="🆔" readonly>
<br>
<label for="nombre">Nombre</label> <br>
<input type="text" name="nombre" class="colortexto" id="nombre" placeholder="👤" readonly>
<br>
<label for="apellidos">Apellidos</label> <br>
<input type="text" name="apellidos" class="colortexto" id="apellidos" placeholder="👤" readonly>
<br>
<label for="telefono">Teléfono</label> <br>
<input type="number" name="telefono" class="colortexto" id="telefono" placeholder="📞" min="600000000">
<br>
<label for="direccion">Dirección</label> <br>
<input type="text" name="direccion" class="colortexto" id="direccion" placeholder="🏠 ">
<br>
<label for="email">Email</label> <br>
<input type="email" name="email" class="colortexto" id="email" placeholder="@ ">
<br>
<button type="submit" id="enviar">Enviar</button>
</form>
编辑:有人要求查看我的验证,它们位于另一个不同的.js中,该文件链接在HTML以及css、.js、库等的头部。正如我所说,它们运行得非常完美,重定向是我唯一不知道如何解决的问题:)
非常感谢你帮助我
这是:
$(document).ready(function(){
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z][a-z\s]*$/i.test(value);
}, "Sólo letras y espacios");
jQuery.validator.addMethod("nifcorrecto", function(value, element){
return this.optional(element) || /^[0-9]{8}[TRWAGMYFPDXBNJZSQVHLCKE]$/i.test(value);
}, "NIF incorrecto");
$("#formulario_registro").validate({
rules:{
nif:{
required:true,
nifcorrecto:true
},
nombre:{
required:true,
rangelength:[3, 20],
lettersonly:true
},
apellidos:{
required:true,
rangelength: [3,50],
lettersonly:true
},
telefono:{
required:true,
min:600000000,
max: 799999999
},
direccion:{
required:true,
minlength:4,
maxlength:255
},
email:{
required:true,
email:true
},
},
messages:{
nif:{
required:"Este campo es obligatorio",
nifcorrecto:"Formato de DNI incorrecto"
},
nombre:{
required:"Por favor, introduzca un nombre",
rangelength:"El número de caracteres mínimo es de 3 hasta un máximo de 20",
},
apellidos:{
required: "Por favor introduzca los apellidos",
rangelength:"El número de caracteres mínimo es de 3 hasta un máximo de 50"
},
telefono:{
required: "Introduzca su número de teléfono",
min: "Número de teléfono móvil debe ser entre 600000000 y 799999999",
max: "Número de teléfono móvil debe ser entre 600000000 y 799999999"
},
direccion:{
required:"Debe inrtoducir una dirección",
minlength:"La dirección debe tener al menos 4 caracteres",
maxlength:"La dirección debe tener como máximo 255 caracteres"
},
email:{
required:"Es necesario introducir un email de contacto",
email:"El formato de email no es correcto"
},
}
});
});
因此,我知道这是错误的,如果我单击,字段是否为空并不重要,它只会重定向到galeria.html
(gallery),而不侦听验证。我有(在另一个不同的.js中)。
因此我需要单击,检查字段是否填充了正确的验证数据,然后重定向到
galeria.html
我不知道如何执行此操作,请帮助
如果我删除所有的
“$('#enviar')。单击(function()……”
,它会验证字段并警告我它们是错误的或empy,但显然不会将我重定向到任何地方
PS:西班牙语不是问题,它工作得很好。如果数据无效,请尝试添加一个
布尔值变量,该变量将变为false
:
$(document).ready(function() {
//This is to fill the inputs from the login form in the current registration form. Not important, this works fine.
$("#nif").val(localStorage.getItem("nif"));
$("#nombre").val(localStorage.getItem("nombre"));
$("#apellidos").val(localStorage.getItem("apellidos"));
//this is the submit button, enviar is "send".
$('#enviar').click(function(){
var valid = true;
// your validations
if($("#nif").val() == ""){
valid = false;
}
// and so on all your validations
if(valid){ // only if no errors
alert("User has been registered succesfully, will be redirected to the gallery.");
window.open("galeria.html");
}
});
});
如果要重定向而不是打开新窗口,可以使用:
location.replace(“galeria.html”);
您将验证放在哪里..请同时显示该代码哦,我的天啊,非常感谢!我现在就要试试这个了。:)
$(document).ready(function() {
//This is to fill the inputs from the login form in the current registration form. Not important, this works fine.
$("#nif").val(localStorage.getItem("nif"));
$("#nombre").val(localStorage.getItem("nombre"));
$("#apellidos").val(localStorage.getItem("apellidos"));
//this is the submit button, enviar is "send".
$('#enviar').click(function(){
var valid = true;
// your validations
if($("#nif").val() == ""){
valid = false;
}
// and so on all your validations
if(valid){ // only if no errors
alert("User has been registered succesfully, will be redirected to the gallery.");
window.open("galeria.html");
}
});
});