如何驗證SSN使用正則表達式

-2

我有我的大部分代碼完成它，但由於某種原因，它只是提交我的形式沒有做任何事情。我試圖驗證一個SSN是否輸入沒有或有破折號。以及驗證它，如果它是無效的，我想改變輸入的文字和背景的顏色。我有我的班級名稱和Id的設置正確，並在我的CSS我使用的東西像input.invalid，label.invalid等顏色變化。這裏是我的JS代碼。任何幫助將是偉大的，謝謝！如何驗證SSN使用正則表達式

window.onload = function() { 

document.forms[0].onsubmit = validForm; 

    } 

function validForm() { 

var allTags = document.forms[0].getElementsByTagName("*"); 

for(vari = 0; i < allTags.length; i++) { 

    validTag(allTags[i]); 

} 

return false; 

function validTag(thisTag) { 

    var outClass = ""; 

    var allClasses = thisTag.className.split(" "); 

    for(var j = 0; j < allClasses.length; j++) { 

     outClass += validBasedOnClass(allClasses[j]) + " "; 

    } 

    thisTag.className = outClass; 

    if(outClass.indexOf("invalid") > -1) { 

     invalidLabel(thisTag.parentNode); 

     thisTag.focus(); 

     if(thisTag.nodeName == "INPUT") { 

      thisTag.select(); 

     } 

    } 

    function validBasedOnClass(thisClass) { 

     var classBack = ""; 

     switch(thisClass) { 

      case "": 

      case "invalid": 
       break; 

      case "Social": 

       if(!validSocial(thisTag.value)) { 

        document.getElementById("socialNum").className = ("invalid"); 

        document.getElementById("ssn").className = ("invalid"); 

        classBack = "invalid "; 

      } 
       break; 

      default: 

       classBack += thisClass; 

     } 

     return classBack; 

    } 

    function validSocial(social) { 

     var re = /^\d{3}-?\d{2}-?\d{4}$/; 

     var socialArray = re.test(social); 

     if(socialArray) { 

      document.getElementById("socialNum").value = socialArray[1] + "-" + socialArray[2] + "-" + socialArray[3]; 

      return true; 

     } 

     return false; 

    } 

    function invalidLabel(parentTag) { 

     if(parentTag.nodeName == "LABEL") { 

      parentTag.className += "invalid"; 

      } 

    } 

}

}

這裏是我的要求的HTML代碼

<!DOCTYPE html>

<link rel="stylesheet" type="text/css" href="regex.css"/> 

<script type="text/javascript" src="regex.js"></script> 

<title>COP2831: Chapter 7 - Regular Expressions</title>

<h1>Regular Expressions - Kevin Taylor</h1> 

<form> 

    <label for="socialNum" id="ssn">Enter Social Security Number: 

    <input type="text" name="Social" id="socialNum" class="Social" maxlength="9"/> 

    </label> 

    <p><input type="submit" value="Submit">&nbsp;&nbsp;<input type="reset"></p> 

</form>

來源

2017-09-30 colbreez

看看[問]。「尋求調試幫助的問題（」爲什麼這個代碼不工作？「）必須包含所需的行爲，特定的問題或錯誤以及在問題本身中重現問題所需的最短代碼。給其他讀者看。[mcve]「 – pvg

我說明了理想的行爲。我需要它來驗證ssn。以及更改標籤和輸入的文字顏色。這不是調試幫助，因爲我的代碼無法正常工作。我是否生產了大部分代碼？是。我需要幫助找出爲什麼它不驗證。這是一個問題。不調試。如果是拼寫或語法錯誤，我不會在這裏。 – colbreez

'調試'不是'拼寫或語法錯誤'。你的問題仍然是'爲什麼不這樣做'。 '驗證ssn'不是'期望的行爲'的明確陳述。請閱讀鏈接的內容並相應地編輯您的問題。 – pvg

因爲你的樣品是不完整的，我真的不明白你爲什麼做這種方式我只是給你的SSN驗證的簡化工作的樣品。

window.onload = function() { 
    document.forms[0].onsubmit = validForm; 
}; 
function validForm() { 
    var ssnTag = document.getElementById("socialNum"); 
    var re = /^\d{3}-?\d{2}-?\d{4}$/; 
    var valid = re.test(ssnTag.value); 
    if (valid) { 
     ssnTag.style.borderColor = "green"; 
    } else { 
     ssnTag.style.borderColor = "red"; 
    } 
    return false; 
}

JSFiddle

來源

2017-10-01 19:56:20 wp78de

謝謝！我試圖這樣做的唯一原因是因爲，這是我的大學書籍顯示如何去做的方式。似乎這本書讓事情變得更加複雜。感謝您的幫助。反正有沒有改變輸入，如果我輸入一個像123456789一樣的ssn後，我提交它會改變它爲123-45-6789？ – colbreez

這有點難。你可以使用一個正則表達式來處理組'/ ^（\ d {3}） - ？（\ d {2}） - ？（\ d {4}）$ /'從組$ 1，$ 2，$ 3，他們再一次，並更新文本框。 – wp78de

謝謝！我終於明白了，使用團體$ 1，$ 2，$ 3完全是這樣。謝謝！ – colbreez

如何驗證SSN使用正則表達式

回答

相關問題