javascript验证代码不起作用

javascript validation code wont work

本文关键字：不起作用 代码 验证 javascript      更新时间：2023-09-26

我正在编写一个验证脚本，但当我运行代码时，除了所有文本字段边框变红之外，什么都没有发生（这应该发生，但在文本字段中有文本的条件下，它仍然是红色的）。这是我的代码

 function frontendvalidation(){
 var emailaddbox = document.getElementById('emailaddbox').value;
 //var emailaddbox = document.forms["signupform"]["emailaddbox"].value;
 var username = document.getElementById('username').value;
 var password = document.getElementById('passwordbox').value;
 var confirmpasswordbox = document.getElementById('confirmpasswordbox').value;
// if our signup fields are  empty then the border will be red
if(username === '' || emailaddbox === '' || password=== '' || confirmpasswordbox=== ''){
     document.getElementById('username').   style.borderColor = "red";
     document.getElementById('emailaddbox').style.borderColor = "red";  
     document.getElementById('passwordbox').style.borderColor = "red";
     document.getElementById('confirmpasswordbox').style.borderColor = "red";
     return false;
 } 
if(username === !'' && username.length => 5) {
   document.getElementById('username').   style.borderColor = "green";
     return true;
 }
 if(emailaddbox === !'' ){
 document.getElementById('emailaddbox').style.borderColor = "green";  
 }
 if (password === ! '' && password.length <=5){
              document.getElementById('passwordbox').style.borderColor = "green";

 }
 if ( password != confirmpasswordbox){
            document.getElementById('confirmpasswordbox').style.borderColor = "red";
 } else if (confirmpasswordbox === password){
             document.getElementById('confirmpasswordbox').style.borderColor = "green";
          return true ;
 }
}

你想用做什么

if (password === ! '' && password.length <=5){
    document.getElementById('passwordbox').style.borderColor = "green";
}

试试这样的东西：

if (password != undefined && password.length > 5){
    document.getElementById('passwordbox').style.borderColor = "green";
}

基本上password === ! ''不是有效的语法。您说的类似于"密码等于空字符串的倒数"。对于一些JavaScript类型的体操来说，这相当于"密码严格等于真"。

（此外，强制密码超过5个字符，不少于或等于5个字符似乎更有意义）

除了其他答案中列出的语法错误外，在任何字段中检查空格的行将所有字段标记为错误（如果其中任何字段为空）。这里还有一个语法错误：用户名.长度=>5应该是用户名.长度>=5

这是更新的工作代码：

function frontendvalidation(){
  var emailaddbox = document.getElementById('emailaddbox').value;
   //var emailaddbox = document.forms["signupform"]["emailaddbox"].value;
  var username = document.getElementById('username').value;
  var password = document.getElementById('passwordbox').value;
  var confirmpasswordbox = document.getElementById('confirmpasswordbox').value;
  //Default to everything showing an error, and clear the errors as fields are validated.
  document.getElementById('username').style.borderColor = "red";
  document.getElementById('emailaddbox').style.borderColor = "red";  
  document.getElementById('passwordbox').style.borderColor = "red";
  document.getElementById('confirmpasswordbox').style.borderColor = "red";
  // if our signup fields are  empty then the border will be red
  if(username === '' && emailaddbox === '' && password=== '' && confirmpasswordbox=== ''){
       return false;
   } 
  if(username !== '' && username.length >= 5) {
    document.getElementById('username').style.borderColor = "green";
  }
  if (emailaddbox !== '' ){
    document.getElementById('emailaddbox').style.borderColor = "green";  
  }
  if (password !== '' && password.length <=5){
    document.getElementById('passwordbox').style.borderColor = "green";
  }
  if ( password != confirmpasswordbox){
    document.getElementById('confirmpasswordbox').style.borderColor = "red";
  } else if (confirmpasswordbox === password){
    document.getElementById('confirmpasswordbox').style.borderColor = "green";
    return true ;
  }
}

工作代码笔：http://codepen.io/nobrien/pen/oxqoeR

将条件username === !''更改为username !== ''

语法!'' every是false，如果你与一个字符串进行比较，你每次都会获得false，因为你正在与===进行比较，它们需要与另一个类似的字符串进行比较才能获得true的结果，在你的情况下，'' === false则是每次false。

我修复了你的代码，发现有很多像=>这样的语法错误，正确的是>=。查看我修复的代码。

我想这就是你想要的。

function frontendvalidation(event){
    var elementEmail = document.getElementById('emailaddbox');
    var elementUserName = document.getElementById('username');
    var elementPassword = document.getElementById('passwordbox');
    var elementConfirmPassword = document.getElementById('confirmpasswordbox');
    var validate = false;
    if (elementUserName.value !== '' && elementUserName.value.length >= 5) {
        elementUserName.style.borderColor = "green";
        validate = validate ? validate : true;
    } else {
    	elementUserName.style.borderColor = "red";
    }
    
    if (elementEmail.value !== '') {
    	 elementEmail.style.borderColor = "green"; 
       validate = validate ? validate : true;
    } else {
    	 elementEmail.style.borderColor = "red";
    } 
    
    if (elementPassword.value !== '' && elementPassword.value.length <= 5){
        elementPassword.style.borderColor = "green";
        validate = validate ? validate : true;
    } else {
    	elementPassword.style.borderColor = "red";
    }
    
    if ( elementConfirmPassword.value !== '' && elementConfirmPassword.value === elementPassword.value){
        elementConfirmPassword.style.borderColor = "green";
        validate = validate ? validate : true;
    } else {
	    elementConfirmPassword.style.borderColor = "red";
    }
    
    return validate;
} 
document.getElementById('btnValidator').onclick = frontendvalidation;
<input type="text" id="username" /><br/>
<input type="text" id="emailaddbox" /><br/>
<input type="text" id="passwordbox" /><br/>
<input type="text" id="confirmpasswordbox" /><br/>
<button id="btnValidator" >Validator</button>

相关文章：