javascript验证码不会工作

时间:2016-04-14 03:50:17

标签: javascript validation

我正在编写验证脚本,但是当我运行代码时,除了所有文本字段边框都变为红色(这应该发生,但在文本字段中有文本的情况下它仍然是红色的)没有任何事情发生。这是我的代码

 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 ;
 }
} 

3 个答案:

答案 0 :(得分:0)

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

语法!''每个都是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> 

答案 1 :(得分:0)

你想做什么:

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个字符似乎更有意义)

答案 2 :(得分:0)

除了其他答案中列出的语法错误之外,任何字段中检查空白的行都将所有字段标记为错误(如果其中任何字段为空)。此处还存在语法错误:username.length =&gt; 5它应该是username.length&gt; = 5

这是更新的工作代码:

#Step 1: User enters text file.
#Step 2: Pig Latin function rewrites file and saves as .txt.
#Step 3: Tracks how many lines and words it rewrites.


vowels = ("A", "a", "E", "e", "I", "i", "O", "o", "U", "u")

# Functions

def pig_word(string):
    line = string.strip("\n")
    for word in string.split(" "):
        first_letter = word[0]
        if first_letter in vowels:
            return word + "way"     
        else:
            return word[1:] + first_letter + "ay"    

def pig_sentence(sentence):
    word_list = sentence.split(" ")
    convert = " "   
    for word in word_list:
        convert = convert + pig_word(word)    
        convert = convert + " "   
    return convert

def line_counter(s):
    line_count = 0
    for line in s:
        line_count += 1
    return line_count

def word_counter(line):
    word_count = 0
    list_of_words = line.split()
    word_count += len(list_of_words)
    return word_count




# File path conversion

text = raw_input("Enter the path of a text file: ")
file_path = open(text, "r")
out_file = open("pig_output.txt", "w")


s = file_path.read()
pig = pig_sentence(s)
out_file.write(pig+" ")
out_file.write("\n")


linecount = line_counter(s)
wordcount = word_counter(s)


file_path.close()
out_file.close()

# Results

print "\n\n\n\nTranslation finished and written to pig_output.txt"
print "A total of {} lines were translated successfully.".format(linecount)
print "A total of {} words were translated successfully.".format(wordcount)
print "\n\n\n\n"

工作码本:http://codepen.io/nobrien/pen/oxqoeR