HTML 实录 <一>

注册表单的实现

<style>
th, td {
    text-align: left;
    padding: 8px 4px;
}
</style>

    <form action="?request=register" method="post">
        <table style="margin: auto">
            <tr>
                <td>用户名:</td>
                <td><input width="auto" type="text" required="required" autocomplete="username"
                    name="name"></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input width="auto" type="password" required="required" autocomplete="new-password"
                    id="form_passwd" name="passwd"></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input width="auto" type="password" required="required" autocomplete="new-password"
                    id="form_passwd_two" name="passwd"></td>
            </tr>
        </table>
        <br>
        <button type="submit">注册</button>
    </form>

效果:

监听密码输入框 input 输入事件

    <script type="text/javascript">
        // 验证密码长度
        var form_passwd = document.getElementById("form_passwd");
        form_passwd.addEventListener("input", function () {
            if(this.value.length < 6 || this.value.length > 20){ // 判断条件完全自定义
                this.setCustomValidity('密码格式不正确, 长度6~20');
            }else {
                this.setCustomValidity("");
            }
        });
    </script>

HTML 实录 <一>

原文：https://www.cnblogs.com/develon/p/10833715.html