应用表单控件制作一个注册页面 要求将某个输入框获得焦点后会变宽,未填写正确信息时为红色且有警示图标。 2、填写正确信息和错误提示信息的页面效果如下图所示。
时间: 2024-10-13 16:12:30 浏览: 12
创建一个包含聚焦变宽、验证错误提示和警示图标的注册表单,可以按照以下步骤进行设计:
1. **HTML结构**:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="registrationForm">
<input type="text" id="usernameInput" placeholder="用户名*" onfocus="adjustWidth()" required />
<span class="error-icon" style="display:none">!</span>
<div class="validation-error" id="usernameError"></div>
<!-- 其他输入项如密码、邮箱等,类似编写 -->
<button type="submit">注册</button>
</form>
<script src="scripts.js"></script>
</body>
</html>
```
2. **CSS样式** (styles.css):
```css
.error-icon {
color: red;
font-size: 18px;
margin-left: 5px;
}
.validation-error {
display: none;
color: red;
font-weight: bold;
}
.form-input-focused {
width: 200px; /* 设置初始宽度 */
transition: width 0.3s ease;
}
```
3. **JavaScript处理** (scripts.js):
```javascript
function adjustWidth() {
var input = document.getElementById("usernameInput");
if (!input.checkValidity()) {
input.classList.remove('form-input-focused');
input.style.width = "100%";
input.nextElementSibling.style.display = 'inline';
} else {
input.classList.add('form-input-focused');
input.style.width = "200px";
input.nextElementSibling.style.display = 'none';
}
}
// 验证函数
document.getElementById('registrationForm').addEventListener('input', function(e) {
var input = e.target;
if (!input.checkValidity()) {
var errorElement = document.getElementById(input.id + "Error");
errorElement.innerText = input.validationMessage;
errorElement.style.display = 'block';
input.nextElementSibling.style.display = 'inline';
} else {
// 清除错误提示
var errorElement = document.getElementById(input.id + "Error");
errorElement.style.display = 'none';
}
});
```
在这个例子中,当用户尝试获取`usernameInput`输入框的焦点时,如果输入有效则变宽到200px;反之,如果输入不符合规定(例如为空),焦点保持不变,红色警示图标显示并附带错误消息。
阅读全文