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>