<style>
* {
margin: 0;
padding: 0;
}
#form {
width: 300px;
margin: 0 auto;
text-align: center;
}
.form-input {
position: relative;
padding-bottom: 20px;
}
.form-input label {
position: absolute;
top: 23px;
left: 0;
font-size: 12px;
color: #505050;
width: 100%;
text-align: center;
display: none;
}
.form-input label.default {
color: #505050;
}
.form-input label.danger {
color: orangered;
}
.form-input label.middle {
color: orange;
}
</style>
<!-- 表单有默认事件 -->
<form action="javascript:void(0)" id="form">
<h2>表单验证案例</h2>
<!-- <button>123</button> -->
<!-- 验证手机号 -->
<div class="form-input">
<input type="text" id="phoneInput" placeholder="请输入手机号">
<label for="phoneInput" class="danger" data-tip="仅支持中国大陆手机号">仅支持中国大陆手机号</label>
</div>
<!-- 验证邮箱 -->
<div class="form-input">
<input type="text" id="emailInput" placeholder="请输入邮箱地址">
<label for="emailInput"data-tip="请输入首字母大写6-20位的邮箱">hello world</label>
</div>
<!-- 密码验证 -->
<div class="form-input">
<input type="text" id="passwordInput" placeholder="请输入密码">
<label for="passwordInput"data-tip="请输入密码">hello world</label>
</div>
<!-- 重复密码验证 -->
<div class="form-input">
<input type="text" id="rpasswordInput" placeholder="请再次输入密码" data-validate="success">
<label for="rpasswordInput"data-tip="请验证两次密码是否一样">hello world</label>
</div>
<button id="submitBtn">提交表单</button>
</form>
<script>
第一部分 手机号码验证
var phone_input = document.querySelector("#phoneInput")
var phone_lable = phone_input.nextElementSibling
function validatePhone() {
var reg = /^1[3-9]\d{9}$/
if (reg.test(phone_input.value)) {
success(phone_input, phone_lable)
} else {
failed(phone_input, phone_lable, "请输入正确的手机号")
}
}
phone_input.addEventListener("blur", validatePhone)
// 成功
function success(input, lable) {
//dom初始化 1.清类名 2.display:none
lable.classList.remove("default", "danger", "middle")
lable.style.display = "none"
input.style.borderColor = "yellowgreen"
input.dataset.validate = "success";
失败
function failed(input, lable, tip_text,class_name) {
//false || danger ---默认denger
class_name=class_name||"danger"
lable.classList.remove("default", "danger", "middle")
lable.style.display = "block"
input.style.borderColor = ""
lable.classList.add(class_name)
lable.innerHTML = tip_text
// 标记验证状态;
input.dataset.validate = "error";
//邮箱验证
var email_input = document.querySelector("#emailInput")
var email_lable = email_input.nextElementSibling
function validateEmail() {
// console.log(1);、
var reg = /^[a-zA-Z]\w{6,20}@[\da-zA-Z]{2,10}\.com$/
if (!/^[a-zA-Z]/.test(email_input.value)) {
return failed(email_input, email_lable, "首字母必须大写")
}
if (reg.test(email_input.value)) {
success(email_input, email_lable)
} else {
failed(email_input, email_lable, "请输入正确的邮箱")
}
}
email_input.addEventListener("blur", validateEmail)
//密码强度验证
var password_input=document.querySelector("#passwordInput")
var password_lable=password_input.nextElementSibling
function validatePwd(){
// console.log(1);
var strength=0
if(/\d/.test(password_input.value)){
strength++;
}
if(/[a-zA-Z]/.test(password_input.value)){
strength++;
}
if(/[@#%&]/.test(password_input.value)){
strength++;
}
switch(strength){
case 1:
failed(password_input,password_lable,"密码强度过低")
break;
case 2:
failed(password_input,password_lable,"密码强度适中","middle")
break;
case 3:
failed(password_input,password_lable,"密码强度高","default")
break;
}
}
password_input.addEventListener("input",validatePwd)
// 密码格式验证
function validateAllPwd(){
// 1. 密码长度
// 2. 密码强度;
if( !/^.{6,20}$/.test( password_input.value )){
return failed( password_input , password_lable , "密码长度应该为6~20位");
}
if( pwd_input.dataset.strength < 2 ){
return failed( password_input , password_lable , "密码强度过低,请输入强度更高的密码!");
}
success( pwd_input , pwd_label );
}
password_input.addEventListener("blur" ,validateAllPwd )
//获取焦点
var inputs=document.querySelectorAll(".form-input input")
function valieFocus(){
var lable=this.nextElementSibling
lable.classList.remove("default", "danger", "middle")
lable.style.display="block"
lable.innerHTML=lable.dataset.tip
}
for(var i=0;i<inputs.length; i++){
inputs[i].addEventListener("focus",valieFocus)
}
//提交状态验证
var btn=document.querySelector("#submitBtn")
function submitB(e) {
e=e||event
for (var i = 0; i < inputs.length; i ++) {
if (inputs[i].dataset.validate!=="success") {
e.preventDefault()
inputs[i].focus()
return
}
}
}
btn.addEventListener("click",submitB)