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>

---