javascript - 基础遵守验证自定义 CSS

Question

我使用 Foundation Abide-Validation，我想开发这样的东西：

我已经为条件制作了一个 jQuery，但我不知道如何构建 CSS 部分（绿色单选按钮和红色字母等）。任何人都可以帮助我吗？谢谢你。

Answer 1

我只会向您展示如何实现这一目标，但最终结果取决于您。SO不是公司

function submitFrom() {
    alert("Success Yesss!!!");
    return false;
}

function validatePassword() {
  var password = this.value;
    if(password.length >= 8){//be at least 8 characters
        valid8Characters.classList.add("valid");
    }else{
        valid8Characters.classList.remove("valid");
    }
    if(/(?=.*[a-z])/.test(password)){//at least one lower case letter exists
        validLeastOnelower.classList.add("valid");
    }else{
        validLeastOnelower.classList.remove("valid");
    }
    if(/(?=.*[A-Z])/.test(password)){//at least one upper case letter exists
        validLeastOneUpper.classList.add("valid");
    }else{
        validLeastOneUpper.classList.remove("valid");
    }
    if(/(?=.*[0-9])/.test(password)){//at least one Number exists
        validLeastOneNumber.classList.add("valid");
    }else{
        validLeastOneNumber.classList.remove("valid");
    }

}
var validForm = document.querySelector("#validForm"),
    passwordInput = document.querySelector("#password");

var valid8Characters = document.querySelector("#valid8Characters"),
    validLeastOnelower = document.querySelector("#validLeastOnelower"),
    validLeastOneUpper = document.querySelector("#validLeastOneUpper"),
    validLeastOneNumber = document.querySelector("#validLeastOneNumber");

validForm.addEventListener("submit",submitFrom,false);
passwordInput.addEventListener("input",validatePassword,false);

#validForm li{
    list-style:none;
    position:relative;
}
#validForm li:before{
    content:"";
    position:absolute;
    top:50%;
    left:-20px;
    margin-top:-8px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:red;
}
#validForm li.valid:before{
    background:green;
}
#validForm #valid{ 
   display:none
} 
input#password:focus + #valid{ 
   display:block
} 

<h1>Password (UpperCase, LowerCase, Number/SpecialChar and min 8 Chars)</h1>
<form id=validForm>
    <label for=password>Password</label>
    <input id=password type=password placeholder=password pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required />
    <div id=valid>
        <h4>Password must: </h4>
        <ul>
            <li id=validLeastOnelower>have at least one lowercase character</li>
            <li id=validLeastOneUpper>Have at least one capital letter</li>
            <li id=validLeastOneNumber>Have at least one number</li>
            <li>Not contain multiple identical consecutive characters</li>
            <li>Not be sthe same as the account name</li>
            <li id=valid8Characters>Be at least 8 characters</li>
            <li>Not be a common password</li>
        </ul>
    </div>    
    <input type=submit value=Continue />
</form>