这里拿登陆注册来做记录。功能点:点击切换不同样式对应不同代码,添加正则校验,发送手机验证码。最后有整个例子。
先写个简单的登陆注册样式。
接下来就是点击登陆注册下面对应的块也要对应的变化,我们要先拿到标题的class名添加点击事件,点击的时候再拿到下面的块进行show和hide就可以了。
//点击切换不同的块
$(".titflex .istit").click(function () {
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
$(".inpcont .items").eq(index).show().siblings().hide();
})
然后在说这个input校验提示,因为原生没有vue配合element的验证那么方便,校验包括标签添加都需要自己手写,样式如下。
1.首先要给input定义id,方便拿到输入的值进行正则判断。
2.定义自己需要的提示标签。
3.input失去焦点触发校验,添加提示标签。
4.点击登录按钮也要对应添加提示标签。
最后搞一下发送验证码。
1.手机号校验通过,获取验证码按钮才可以点击。
2.封装计时器。
3.点击获取验证码开启倒计时,并且这个按钮不能再次点击。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>登陆注册</title>
<meta name="keywords" content="关键词" />
<meta name="description" content="描述" />
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<style>
input{
border: 1px solid #eee;
}
button{
border: none;
}
.content {
width: 400px;
margin: 100px auto;
border: 1px solid #333;
border-radius: 6px;
padding: 10px 40px 30px;
box-sizing: border-box;
}
.titflex {
display: flex;
font-size: 29px;
width: 200px;
margin: 10px auto 20px;
justify-content: space-between;
cursor: pointer;
}
.titflex .active {
border-bottom: 2px solid red;
padding-bottom: 10px;
color: red;
}
.inpcont .items .inputs {
margin: 30px auto;
position: relative;
}
.inpcont .items .inputs input {
width: 100%;
height: 40px;
border-radius: 8px;
padding-left: 10px;
display: block;
}
button {
background-color: #666;
margin: 40px auto 10px;
width: 100%;
height: 40px;
display: block;
border-radius: 6px;
color: #fff;
cursor: pointer;
}
.spants {
color: red;
font-size: 14px;
position: absolute;
top: 45px;
}
.inpflex {
display: flex;
}
</style>
<body>
<div class="content">
<div class="titflex">
<div class="istit">登录</div>
<div class="istit active">注册</div>
</div>
<div class="inpcont">
<div class="items" style="display: none;">
<div>
<form id="formLog">
<div class="inputs">
<input oninput="if(value.length>11)value=value.slice(0,11)" type="text" maxlength="11"
name="phone" id="phone" placeholder="请输入手机号">
</div>
<div class="inputs">
<input type="password" name="pwd" id="pwd" placeholder="请输入密码">
</div>
</form>
</div>
<button onclick="login()">点击登录</button>
</div>
<div class="items">
<div>
<form id="formReg">
<div class="inputs">
<input oninput="if(value.length>11)value=value.slice(0,11)" type="text" maxlength="11"
name="phones" id="phones" placeholder="请输入手机号">
</div>
<div class="inputs inpflex">
<input type="text" name="code" id="code" placeholder="请输入验证码">
<input type="button" id="getcode" value="获取验证码">
</div>
</form>
</div>
<button onclick="register()">注册</button>
</div>
</div>
</div>
</body>
<script>
//点击切换不同的块
$(".titflex .istit").click(function () {
$(".spants").remove();
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
$(".inpcont .items").eq(index).show().siblings().hide();
})
</script>
<script>
//这里先把所有校验写上
var emptyPhone = "<span class='spants'>手机号不能为空!</span>"
var noPhone = "<span class='spants'>手机号格式不正确!</span>"
var phonecode = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/
var pwd = "<span class='spants'>密码不能为空!</span>"
var code = "<span class='spants'>验证码不能为空!</span>"
//这里先做input失去焦点校验
$("#phone").blur(function () {
if (!$("#phone").val()) { //判定用户名非空
$(".spants").remove();
$("#phone").after(emptyPhone);
} else if (!phonecode.test($("#phone").val())) {
$(".spants").remove();
$("#phone").after(noPhone);
} else {
$(".spants").remove();
}
});
$('#pwd').blur(function () {
if (!$("#pwd").val()) { //判定用户名非空
$(".spants").remove();
$("#pwd").after(pwd);
} else {
$(".spants").remove();
}
})
//点击登录也需要判断
function login() {
if (!$("#phone").val()) { //判定用户名非空
$(".spants").remove();
$("#phone").after(emptyPhone);
return;
}
if (!phonecode.test($("#phone").val())) {
$(".spants").remove();
$("#phone").after(noPhone);
return;
}
if (!$("#pwd").val()) {
$(".spants").remove();
$("#pwd").after(pwd);
return;
}
let phone = $('#formLog').serializeArray()[0].value
let pwd = $('#formLog').serializeArray()[1].value
let formdata = {
phone,
pwd
}
console.log(formdata, '拿到输入框数据');
}
</script>
<script>
//倒计时
var minth = 60; //秒数初始值
var mytime;
//封装一个倒计时方法
function fn() {
minth = --minth;
if (minth > 0) { //还没有倒计时结束
$("#getcode").val('(' + minth + '秒)后重发').attr("disabled", "disabled");
} else { //倒计时结束
$("#getcode").removeAttr("disabled");
minth = 60; //重新初始化
$("#getcode").val('重新发送');
clearInterval(mytime); //清除定时函数
}
}
</script>
<script>
$("#phones").blur(function () {
if (!$("#phones").val()) { //判定用户名非空
$(".spants").remove();
$("#phones").after(emptyPhone);
} else if (!phonecode.test($("#phones").val())) {
$(".spants").remove();
$("#phones").after(noPhone);
} else {
$(".spants").remove();
}
});
$('#code').blur(function () {
if (!$("#code").val()) { //判定用户名非空
$(".spants").remove();
$("#code").after(code);
} else {
$(".spants").remove();
}
})
//点击发送验证码
$('#getcode').click(function () {
if (!$("#phones").val()) { //判定用户名非空
$(".spants").remove();
$("#phones").after(emptyPhone);
return;
}
if (!phonecode.test($("#phones").val())) {
$(".spants").remove();
$("#phones").after(noPhone);
return;
}
$("#getcode").attr("disabled", "disabled");
mytime = setInterval(fn, 1000);
})
//点击注册
function register() {
if (!$("#phones").val()) { //判定用户名非空
$(".spants").remove();
$("#phones").after(emptyPhone);
return;
}
if (!phonecode.test($("#phones").val())) {
$(".spants").remove();
$("#phones").after(noPhone);
return;
}
if (!$("#code").val()) {
$(".spants").remove();
$("#code").after(code);
return;
}
let phones = $('#formReg').serializeArray()[0].value
let code = $('#formReg').serializeArray()[1].value
let formdatas = {
phones,
code
}
console.log(formdatas, '拿到输入框数据');
}
</script>
</html>