2017-01-31 2 views
1

javascript에 익숙하지 않은 경우 javascript를 사용하여 onSubmit 내부에서 양식을 확인하려고하지만 크기가 비교되는 경우 마지막으로 입력하지 않는 것처럼 작동하지 않습니다. 문자열의. 항상 true를 돌려 내 프로그래밍 언어 (변수와 메시지) 영어가 아닌 경우에 따라서 현재 입력 문제 false가 내 javascript 함수에서 작동하지 않습니다.

죄송합니다

function validaDatos(form){ 
 
\t var mensaje=""; 
 
\t var solonumeros = /^([0-9])*$/ 
 
\t var sololetras = /^([A-Z]|[a-z])*$/ 
 
\t var doc = form.doc.value; 
 
\t var apepa = form.apepa.value; 
 
\t var apema = form.apema.value; 
 
\t var nombre = form.nombre.value; 
 
\t var telefono = form.telefono.value; 
 
\t var usuario = form.usuario.value; 
 

 
\t if(!solonumeros.test(doc)){ 
 
\t \t mensaje+="Campo Documento erróneo, solo se aceptan Números"; 
 
\t } 
 
\t if(!sololetras.test(apepa)){ 
 
\t \t mensaje+="Campo Apellido Paterno erróneo, solo se aceptan Letras"; 
 
\t } 
 
\t if(!sololetras.test(apema)){ 
 
\t \t mensaje+="Campo Apellido Materno erróneo, solo se aceptan Letras"; 
 
\t } 
 
\t if(!sololetras.test(nombre)){ 
 
\t \t mensaje+="Campo Nombre erróneo, solo se aceptan Letras <br>"; 
 
\t } 
 
\t if(!solonumeros.test(telefono)){ 
 
\t \t mensaje+="Campo Teléfono, solo se aceptan Números "; 
 
\t } 
 
\t if(!solonumeros.test(usuario) && !sololetras.test(usuario)){ 
 
\t \t mensaje+="Campo Usuario , Solo se Acepta Números y Letras"; 
 
\t } 
 
\t alert(mensaje.length); //return > 0 
 
    /* No compare , no return false */ 
 
\t if(mensaje.length !=0){ 
 
\t \t document.getElementByClassName('msgerror').innerHTML = mensaje; 
 
\t \t return false; 
 
\t } 
 
\t 
 
}
<form action="Models/clsUsuario.php" method="POST" accept-charset="utf-8" id="frmRegistro" onsubmit="return validaDatos(this);"> 
 
<label for="">Documento </label> 
 
<input type="text" id="doc" name="doc" required maxlength="11"> 
 
<label for="">Apellido P.</label> 
 
<input type="text" id="apepa" name="apepa" required maxlength="80"> 
 
<label for="">Apellido M.</label> 
 
<input type="text" id="apema" name="apema" required maxlength="80"> 
 
<label for="">Nombres </label> 
 
<input type="text" id="nombre" name="nombre" required maxlength="80"> 
 
<label for="">Email : </label> 
 
<input type="email" id="email" name="email" required> 
 
<label for="">Teléfono : </label> 
 
<input type="tel" id="telefono" name="telefono" required> 
 
<label for="">Usuario </label> 
 
<input type="text" id="usuario" name="usuario" required> 
 
<label for="">Clave </label> 
 
<input type="password" id="clave" name="clave" required> 
 

 
<label for="">Dirección : </label> 
 
<textarea name="direccion" id="direccion" required></textarea> 
 

 
<input type="hidden" name="registrar" value="registrar"> 
 
<input type="submit" name="registrar" value="Registro" > 
 
<span class="msgerror"></span> 
 
\t \t \t \t 
 
</form>

를 양식을 전송 종료합니다. if 앞에는 메시지 변수의 길이가 표시되지만 더 입력하지 않으면을 입력해야합니다.

Code Run

+0

, 크롬이나 파이어 폭스에서 F12 키를 눌러에서 다를 수 있습니다 다른 브라우저 또는 플랫폼) – some

+0

브라우저 콘솔에서 오류를 표시하지 마십시오. onsubmit으로 인해 로그를 볼 수 없습니다. – DarkFenix

+0

예, 오류가 표시됩니다. 그러나 제출 핸들에 오류가 있기 때문에 페이지가 제출되고 오류가 표시되지 않습니다. Chrome에서는'preserver log'를 확인할 수 있습니다. 존재하지 않는 함수 인'getElementByClassName'을 사용하려고하므로 오류가 발생합니다. 'getElementsByClassName'라는 함수가 있습니다. – some

답변

1

귀하의 오류가이 부분에 있습니다 getElementByClassName라는 함수가있다

if(mensaje.length !=0){ 
    document.getElementByClassName('msgerror').innerHTML = mensaje; 
    return false; 
} 

없습니다. getElementsByClassName라는 기능이 있습니다 (주의는에서 누락 된 getElement 의 ByClassName 항상 배열을 반환 것입니다 : 그것은, 배열이 비어 일치하는 요소가 없다) 크롬에서

브라우저가 페이지로드 사이에 로그를 유지하도록 개발자 도구에서 Preseve Log을 확인할 수 있습니다.

지금 아무것도 보이지 않는 이유는 오류로 인해 함수가 중단되고 양식이 false를 반환하지 않기 때문에 양식이 제출된다는 것입니다.

문자열을 연결하여 여러 가지 다른 오류 메시지를 설정 한 것으로 나타났습니다. 여러 오류가있는 경우 문제가 발생할 수 있습니다. 예를 들어 "Campo Documento erróneo, solo se aceptan NúmerosCampo Apellido Paterno erróneo, solo se aceptan Letras" (누락 된 구분 기호는 입니다.)을 얻을 수 있습니다. 배열을 대신 사용하는 것이 좋습니다. 그리고 배열을 사용할 때 구분 기호와 함께 사용하는 것이 좋습니다. 대신 경고 (mensaje.length)`을 console.log (mensaje.length)`사용`창문에 (콘솔에서 오류 메시지를 볼`의

function validaDatos(form){ 
    var mensaje=[]; 

    // get the element where to set errors. It would be better to use 
    // getElementById, but if you don't have an id on the element, that will 
    // obviously not work. 
    var errorElement = document.getElementsByClassName("msgerror")[0]; 
    var solonumeros = /^([0-9])*$/ 
    var sololetras = /^([A-Z]|[a-z])*$/ 
    var doc = form.doc.value; 
    var apepa = form.apepa.value; 
    var apema = form.apema.value; 
    var nombre = form.nombre.value; 
    var telefono = form.telefono.value; 
    var usuario = form.usuario.value; 

    if(!solonumeros.test(doc)){ 
    mensaje.push("Campo Documento erróneo, solo se aceptan Números"); 
    } 
    if(!sololetras.test(apepa)){ 
    mensaje.push("Campo Apellido Paterno erróneo, solo se aceptan Letras"); 
    } 
    if(!sololetras.test(apema)){ 
    mensaje.push("Campo Apellido Materno erróneo, solo se aceptan Letras"); 
    } 
    if(!sololetras.test(nombre)){ 
    mensaje.push("Campo Nombre erróneo, solo se aceptan Letras"); 
    } 
    if(!solonumeros.test(telefono)){ 
    mensaje.push("Campo Teléfono, solo se aceptan Números"); 
    } 
    if(!solonumeros.test(usuario) && !sololetras.test(usuario)){ 
    mensaje.push("Campo Usuario , Solo se Acepta Números y Letras"); 
    } 
    console.log(mensaje.length); //return > 0 
    /* No compare , no return false */ 

    // test if there is an error (the length is not null) and if the 
    // errorElement exists. 
    if(mensaje.length && errorElement){ 
    errorElement.innerHTML = mensaje.join("<br>"); 
    } 

    // returns true if the length is 0, or false if it is any other value. 
    return mensaje.length === 0; 
} 
+1

완벽하게 작동합니다. 고맙습니다. +1 – DarkFenix

0

당신은 if 문에서 뭔가를 반환해야합니다.

이 시도 :

function validaDatos(form){ 
var mensaje=""; 
var solonumeros = /^([0-9])*$/ 
var sololetras = /^([A-Z]|[a-z])*$/ 
var doc = form.doc.value; 
var apepa = form.apepa.value; 
var apema = form.apema.value; 
var nombre = form.nombre.value; 
var telefono = form.telefono.value; 
var usuario = form.usuario.value; 

if(!solonumeros.test(doc)){ 
    mensaje+="Campo Documento erróneo, solo se aceptan Números"; 
} 
if(!sololetras.test(apepa)){ 
    mensaje+="Campo Apellido Paterno erróneo, solo se aceptan Letras"; 
} 
if(!sololetras.test(apema)){ 
    mensaje+="Campo Apellido Materno erróneo, solo se aceptan Letras"; 
} 
if(!sololetras.test(nombre)){ 
    mensaje+="Campo Nombre erróneo, solo se aceptan Letras <br>"; 
} 
if(!solonumeros.test(telefono)){ 
    mensaje+="Campo Teléfono, solo se aceptan Números "; 
} 
if(!solonumeros.test(usuario) && !sololetras.test(usuario)){ 
    mensaje+="Campo Usuario , Solo se Acepta Números y Letras"; 
} 

/* No compare , no return false */ 
if(mensaje.length !=0){ 
    document.getElementByClassName('msgerror').innerHTML = mensaje; 
    return false; 
} 
return true; 

}

+0

응답 해 주셔서 감사합니다,하지만 시도했지만 긍정적 인 변화를 초래하지 않습니다. – DarkFenix

0

시도 그렇게 사용 :

또한
if(mensaje.length !==0){ //two equals sign 
    document.getElementByClassName('msgerror').innerHTML = mensaje; 
    return false; 
} 

문자열 아래의 기능, 빈 null 또는 정의되지 않은 사용하는 경우 당신이 확인할 수 있습니다 :

function isEmpty(str) { 
    return (!str || 0 === str.length); 
} 

u nderstand == VS = 차이 : 비교

특징 : 그들은 대응하는 위치에 문자 동일한 시퀀스, 동일한 길이와 동일한 문자 때

두 문자열 엄격히 동일하다. 숫자가 인 두 개의 숫자는 똑같습니다 (숫자 값이 같음). NaN이 NaN을 포함하여 과 일치하지 않습니다. 양수 및 음수 0은 서로 동일합니다. 두 개의 부울 피연산자가 모두 true이거나 두 값이 모두 false이면 엄격하게 동일합니다. 엄격한 비교 또는 추상 비교 에 대해 두 개의 별개 객체가 절대로 일치하지 않습니다. 피연산자가 동일한 개체 인 을 참조하는 경우에만 개체를 ​​비교하는식이 참입니다. Null 및 정의되지 않은 유형은 완전히 자신과 동일하고 서로 추상적으로 동일합니다.

Comparison operator

아래의 라인을 확인 ************* 시도를 UPDATE ***********. 다음에 삽입 :

console.log ("success") //this line 
document.getElementByClassName('msgerror')[0].innerHTML = mensaje; 

'msgerror'클래스가있는 요소가 있는지 확인해야합니다.

+0

응답 해 주셔서 감사합니다.하지만 시도했지만 긍정적 인 변화는 없었습니다. 변수 mensaje를 업데이트하지 않았기 때문에 여전히 – DarkFenix

+0

@DarkFenix ​​인 경우 마지막으로 비교하지 않습니다! 너? – iwaduarte

+0

if 앞에는 메시지 변수의 길이가 표시되지만 더 이상 입력하지 않으면 입력해야합니다. – DarkFenix

관련 문제