<style type="text/css">
    .formblock {
        display: inline-block;
        padding: 0px 6px;
        min-width: 300px;
        border: solid 1px #000;
        background-color: #ccc;
    }
    .formblock input {margin-bottom: 10px; }
</style>

<form method="post" action='varify.php' >
    <div class="formblock">
        <h2>reset password</h2>
        <label>Username:<br><input type="text" name="username" value="username" readonly></label><br><!-- value处设置用户名，（比如用PHP），此项只读不可修改  -->
        <label>Password:<span style="color: red;" id="passwdText"></span><br>
            <input type="password" name="passwd1" oninput="testPw()" minlength="8" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$" title="At least 8 characters and contains numeric uppercase and lowercase letters" required></label><br>
        <label>Confirm Password:<span style="color: red;" id="confirmText"></span><br>
            <input type="password" name="passwd2" oninput="confirmPw()" minlength="8" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$" title="At least 8 characters and contains numeric uppercase and lowercase letters" required></label><br>
        <input type="submit" value="reset">
    </div>
</form>

<script type="text/javascript">
    var in_password1 = document.querySelector("input[name=passwd1]");
    var span_testpw = document.querySelector("span#passwdText");
    var in_password2 = document.querySelector("input[name=passwd2]");
    var span_confirm = document.querySelector("span#confirmText");
    //var btn_sub = document.querySelector("input[type=submit]");
    var pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
    function testPw(){
        if(in_password1.value == ""){
            span_testpw.innerHTML = "not null";
            return;
        }
        if(pattern.exec(in_password1.value)){
            span_testpw.innerHTML = "";
        } else {
            span_testpw.innerHTML = "At least 8 characters and contains numeric uppercase and lowercase letters";
        }
    }
    function confirmPw(){
        if(in_password1.value === in_password2.value){
            span_confirm.innerHTML = "";
            in_password2.setCustomValidity('');
        } else {
            span_confirm.innerHTML = "Passwords do not match";
            in_password2.setCustomValidity("Passwords do not match");
        }
    }
</script>

文中的正则表达式来自：博客园-RyanAce1988