好的，这里是一个简单的前端表单验证的例子，
包含您所提到的所有条件：
HTML代码：
```
<div class="container">
<h2>登录</h2>
<
form id="login
Form">
<div>
<lab
el for="username">用户名:</lab
el>
<input type="text" id="username" name="username" data-validate="username" data-message="用户名
只能包含数字、
字母、下划线，且不能以
数字开头，长度在6-20位之间" />
</div>
<div>
<lab
el for="phone">手机号:</lab
el>
<input type="text" id="phone" name="phone" data-validate="phone" data-message="手机号必须为11位纯
数字，且以1开头" />
</div>
<div>
<lab
el for="password">密码:</lab
el>
<input type="password" id="password" name="password" data-validate="required" data-message="密码不能为空" />
</div>
<button type="submit">登录</button>
</
form>
</div>
<!-- 弹出层 -->
<div id="alertBox"></div>
```
JS代码：
```
// 验证规则
const rules = {
username: /^[a-zA-Z_]\w{5,19}$/,
phone: /^1\d{10}$/,
required: /.+/,
};
// 默认提示
文字
const defaultMessages = {
username: '请
输入6-20位
字母、
数字或下划线，不能以
数字开头',
phone: '请
输入11位手机号，以1开头',
required: '该字段不能为空',
};
// 获取表单元素
const
form = document.get
ElementById('login
Form');
const username =
form.
elements.username;
const phone =
form.
elements.phone;
const password =
form.
elements.password;
// 给表单元素添加默认提示
文字
username.value = defaultMessages.username;
phone.value = defaultMessages.phone;
password.value = '';
// 添加失去焦点事件
username.addEventListener('blur', validate);
phone.addEventListener('blur', validate);
password.addEventListener('blur', validate);
// 表单提交事件
form.addEventListener('submit', function(event) {
event.preventDefault();
if (validate()) {
alert('表单验证通过');
}
});
// 表单验证函数
function validate() {
let isValid = true;
const messages = [];
// 遍历表单元素
for (let i = 0; i <
form.
elements.length; i++) {
const
element =
form.
elements[i];
// 如果元素需要验证
if (
element.dataset.validate) {
const ruleName =
element.dataset.validate;
const rule = rules[ruleName];
const value =
element.value.trim();
// 如果元素为空
if (!value) {
isValid = false;
messages.push(defaultMessages.required);
}
// 如果元素不为空，但是不符合规则
else if (rule && !rule.test(value)) {
isValid = false;
messages.push(
element.dataset.message || defaultMessages[ruleName]);
}
}
}
// 如果表单验证不通过
if (!isValid) {
// 弹出错误提示框
const alertBox = document.get
ElementById('alertBox');
alertBox.innerHTML = messages.join('<br>');
alertBox.style.display = 'block';
setTimeout(function() {
alertBox.style.display = 'none';
}, 2000);
}
return isValid;
}
```
关于滑动验证，这里提供一个简单的实现思路：
HTML代码：
```
<div class="container">
<h2>登录</h2>
<
form id="login
Form">
<!-- 省略其他表单元素 -->
<div id="sliderContainer">
<div id="sliderTrack">
<div id="sliderThumb"></div>
</div>
<div id="sliderLab
el">请按住滑块，拖动完成验证</div>
</div>
<button type="submit">登录</button>
</
form>
</div>
<!-- 弹出层 -->
<div id="alertBox"></div>
```
CSS代码：
```
#sliderContainer {
position: r
elative;
width: 300px;
height: 40px;
background-color: #f0f0f0;
margin: 20px auto;
}
#sliderTrack {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 40px;
background-color: #ccc;
cursor: pointer;
}
#sliderThumb {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
background-color: #aaa;
border-radius: 50%;
cursor: pointer;
}
#sliderLab
el {
position: absolute;
left: 0;
top: 50px;
text-align: center;
color: #999;
}
```
JS代码：
```
// 获取滑块元素
const sliderContainer = document.get
ElementById('sliderContainer');
const sliderTrack = document.get
ElementById('sliderTrack');
const sliderThumb = document.get
ElementById('sliderThumb');
const sliderLab
el = document.get
ElementById('sliderLab
el');
// 拖动状态
let isDragging = false;
// 拖动事件
sliderThumb.addEventListener('mousedown', function(event) {
isDragging = true;
});
// 松开事件
document.addEventListener('mouseup', function(event) {
if (isDragging) {
isDragging = false;
// 如果滑块到达终点，验证通过
if (parseInt(sliderThumb.style.left) === 260) {
sliderContainer.classList.add('validated');
}
// 否则重置滑块位置
else {
sliderThumb.style.left = '0';
sliderTrack.style.width = '0';
}
}
});
// 拖动过程中的事件
document.addEventListener('mousemove', function(event) {
if (isDragging) {
// 计算滑块位置
const x = event.clientX - sliderContainer.getBoundingClientRect().left - 20;
if (x >= 0 && x <= 260) {
sliderThumb.style.left = x + 'px';
sliderTrack.style.width = x + '40px';
}
}
});
```
这个例子中，通过给滑块添加mousedown、mouseup、mousemove事件，实现了拖动滑块的功能，并且通过判断滑块位置是否到达终点，来判断是否通过验证。同时，通过添加validated类来修改样式，提示用户验证通过。
扫一扫
703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
