### JavaScript 登录表单验证 为了实现一个带有基本验证功能的登录表单，可以利用HTML内置属性以及JavaScript编写自定义逻辑来增强用户体验并确保输入数据的有效性。下面展示了一个简单的例子，在此案例中，当提交按钮被点击时会触发验证过程。 #### HTML 部分 ```html <form id="loginForm"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required pattern="[A-Za-z0-9]{3,}" title="至少三个字符，仅限字母和数字"/> <br><br> <label for="password">密码:</label> <input type="password" id="password" name="password" required minlength="8"/> <br><br> <button type="submit">登录</button> </form> <div id="message"></div> ``` 这段代码构建了一个基础结构，其中包含了两个必填字段：`username`(用户名)，它接受长度不少于三位由大小写字母或阿拉伯数字组成的字符串；另一个是 `password`(密码), 定义最小长度为八位[^1]。 #### CSS部分（可选） 为了让错误提示更加直观，可以通过CSS样式调整视觉效果： ```css :invalid { border-color:red; } .valid{ display:none; /* 默认隐藏 */ } .invalid{ color:red; } ``` 这里设置了无效状态下的边框颜色变为红色，并准备了用于显示消息样式的类名以便稍后通过JavaScript控制其可见度。 #### JavaScript 部分 接下来就是核心的部分—脚本处理程序: ```javascript document.getElementById('loginForm').addEventListener('submit', function(event){ event.preventDefault(); //阻止默认行为 const form = document.forms['loginForm']; let isValid=true; Array.from(form.elements).forEach(element => { if (!element.checkValidity()) { element.classList.add("invalid"); isValid=false; }else{ element.classList.remove("invalid"); } }); if(!isValid){ alert("存在非法输入，请修正后再试！"); return false; } // 如果所有验证都成功，则继续执行其他操作... }); ``` 上述代码片段监听表单提交事件，遍历每一个表单项检查它们是否有效(`checkValidity()`方法返回布尔值)[^2]。如果有任何一个项不符合条件，则标记该元素为无效外观并通过弹窗提醒用户修改相应的内容直到满足要求为止。