jQuery-表单验证插件~
效果图
废话不多说,先看效果图
代码
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/FormValidation.js"></script>
<link href="./css/FormValidation.css" rel="stylesheet" type="text/css" />
<title>jQuery-表单验证</title>
</head>
<body>
<div class="main">
<form action="form" onsubmit="return func();">
<div class="container">
<div class="card">
<a class="singup">jQuery-表单验证</a>
<div class="inputBox">
<input type="text" required="required" class="Username">
<span class="info1">Username</span>
</div>
<div class="inputBox1">
<input type="text" required="required" class="Email">
<span class="info2">Email</span>
</div>
<div class="inputBox">
<input type="password" required="required" class="Password">
<span class="info3">Password</span>
</div>
<button class="enter" type="submit">Enter</button>
</div>
</div>
</div>
</form>
</body>
<script>
$(function () {
// 给username 输入框绑定焦点失去事件
$('.Username').blur(function () {
$('.Username').tooltip('userName'); // 用户名验证函数
})
// Email 输入框绑定焦点失去事件
$('.Email').blur(function () {
$('.Email').tooltip('email'); // 邮箱验证函数
})
// Password 输入框绑定焦点失去事件
$('.Password').blur(function () {
$('.Password').tooltip('password'); // 密码验证函数
})
})
// 表单验证,全为true 则提交,反之不提交
function func() {
var flag1 = $('.Username').tooltip('userName');
var flag2 = $('.Email').tooltip('email');
var flag3 = $('.Password').tooltip('password');
if (flag1 && flag2 && flag3) {
return true;
} else {
alert("请填写正确的用户名密码或邮箱!!!");
return false;
}
}
</script>
</html>
JS代码
;
(function ($) {
var methods = {
//用户名验证
userName: function () {
// 定义默认字段
var success = "success";
var error = "Error";
var info = "UserName";
// 用户名验证的正则表达式
var reg = /^[a-zA-Z0-9\_\+\-\&\$\*]{6,10}$/;
// 用户名为空的情况
if (this.val() == '') {
// $(".info1").css('color','#000');
$(".info1").show().html(info);
return false;
} else if (this.val().match(reg)) { // 用户名正则匹配
$(".info1").css('color', 'green');
// $(".info1").css('background','#fff');
$(".info1").show().html(success);
return true;
} else { // 正则匹配失败触发的事件
$(".info1").css('color', 'red');
$(".info1").show().html(error);
return false;
}
},
// 密码验证
password: function () {
// 定义默认字段
var success = "success";
var error = "Error";
var info = "Password";
// 密码验证正则表达式
var reg = /^[a-zA-Z0-9\_\-]{8,10}$/;
// 密码为空的情况
if (this.val() == '') {
// $(".info1").css('color','#000');
$(".info3").show().html(info);
return false;
} else if (this.val().match(reg)) { // 正则匹配
$(".info3").css('color', 'green');
$(".info3").show().html(success);
return true;
} else { // 匹配失败的情况
$(".info3").css('color', 'red');
$(".info3").show().html(error);
return false;
}
},
//邮箱验证
email: function () {
// 定义默认字段
var success = "success";
var error = "Error";
var info = "Email";
// 邮箱验证正则表达式
var reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
// 邮箱为空的情况
if (this.val() == '') {
// $(".info1").css('color','#000');
$(".info2").show().html(info);
return false;
} else if (this.val().match(reg)) { // 正则匹配
$(".info2").css('color', 'green');
$(".info2").show().html(success);
return true;
} else { // 匹配失败事件
$(".info2").css('color', 'red');
$(".info2").show().html(error);
return false;
}
}
};
// 函数调用的方法
$.fn.tooltip = function (method) {
// Method calling logic
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
CSS代码
.main{
display: flex;
justify-content: center;
align-items: center;
}
.singup {
color: #000;
text-transform: uppercase;
letter-spacing: 2px;
display: block;
font-weight: bold;
font-size: x-large;
margin-top: 1.5em;
}
.card {
display: flex;
justify-content: center;
align-items: center;
min-height: 350px;
width: 300px;
flex-direction: column;
gap: 35px;
border-radius: 15px;
background: #e3e3e3;
box-shadow: 16px 16px 32px #c8c8c8,
-16px -16px 32px #fefefe;
border-radius: 8px;
}
.inputBox,
.inputBox1 {
position: relative;
width: 250px;
}
.inputBox input,
.inputBox1 input {
width: 100%;
padding: 10px;
outline: none;
border: none;
color: #000;
font-size: 1em;
background: transparent;
border-left: 2px solid #000;
border-bottom: 2px solid #000;
transition: 0.1s;
border-bottom-left-radius: 8px;
}
.inputBox span,
.inputBox1 span {
margin-top: 5px;
position: absolute;
left: 0;
transform: translateY(-4px);
margin-left: 10px;
padding: 10px;
pointer-events: none;
font-size: 12px;
color: #000;
text-transform: uppercase;
transition: 0.5s;
letter-spacing: 3px;
border-radius: 8px;
}
.inputBox input:valid~span,
.inputBox input:focus~span {
transform: translateX(113px) translateY(-15px);
font-size: 0.8em;
padding: 5px 10px;
background: #000;
letter-spacing: 0.2em;
color: #fff;
border: 2px;
}
.inputBox1 input:valid~span,
.inputBox1 input:focus~span {
transform: translateX(156px) translateY(-15px);
font-size: 0.8em;
padding: 5px 10px;
background: #000;
letter-spacing: 0.2em;
color: #fff;
border: 2px;
}
.inputBox input:valid,
.inputBox input:focus,
.inputBox1 input:valid,
.inputBox1 input:focus {
border: 2px solid #000;
border-radius: 8px;
}
.enter {
height: 45px;
width: 100px;
border-radius: 5px;
border: 2px solid #000;
cursor: pointer;
background-color: transparent;
transition: 0.5s;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 2px;
margin-bottom: 3em;
}
.enter:hover {
background-color: rgb(0, 0, 0);
color: white;
}
文件结构
下载
[erphpdown]
来源：蓝奏云 | 提取码:c9pn
[/erphpdown]
阅读剩余
THE END
