原生js使用正则验证表单效果

代码语言:html

所属分类:表单美化

代码描述:原生js使用正则验证表单效果

代码标签: 正则 验证 表单 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
   
<meta charset="UTF-8">
   
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   
<title>js表单正则表达式验证</title>
   
<style>
        body
{
           
margin: 0;
           
padding: 0;
           
font-size: 16px
       
}

        form
{
           
margin: 0 auto;
           
width: 305px;
           
transition: all 1s ease-out 0s
       
}

        input
{
           
font-size: 16px;
           
height: 25px;
           
width: 280px;
           
margin-top: 20px;
           
color: #333;
           
outline: none;
           
border-radius: 5px;
           
border: 1px solid #ccc
       
}

       
input:focus {
           
border: 1px solid #09f
       
}

        p
{
           
display: inline-block;
           
font-size: 12px;
           
color: #ccc;
           
margin: 0;
           
margin-right: 6px
       
}

        span
{
           
display: none;
           
width: 42px;
           
font-size: 12px;
           
margin-left: 2px;
           
color: #ccc;
           
background: #ccc;
           
text-align: center
       
}

        span
.ruo {
           
background: red;
           
color: #fff;
           
opacity: .5
       
}

        span
.zo {
           
background: #ffe000;
           
opacity: 1;
           
color: #fff
       
}

        span
.qiang {
           
background: #039203;
           
color: #fff
       
}

        img
{
           
height: 20px;
           
position: relative;
           
top: 3px
       
}

       
.f {
           
border: 1px solid #fa290d
       
}

       
.r {
           
border: 1px solid #04f014
       
}

       
.btn1 {
           
width: 120px;
           
height: 37px;
           
cursor: pointer;
           
color: #fff;
           
font-size: 16px;
           
font-weight: 700;
           
line-height: 37px;
           
text-align: center;
           
background: linear-gradient(rgb(105,184,86) 0%,rgb(66,164,43) 100%);
           
border-radius: 3px;
           
border: 1px solid #42a42b;
           
position: absolute;
           
left: 50%;
           
margin-left: -60px;
           
margin-top: 25px;
           
outline: none;
           
opacity: .5;
           
transition: all 1s linear 0s;
           
transform-origin: right center
       
}

       
.btn1:hover:after {
           
content: '»'
       
}

       
.btn1:hover {
           
opacity: 1
       
}

       
#btn {
           
position: absolute;
           
left: 55%;
           
top: 355px;
           
cursor: pointer;
           
border-radius: 5px;
           
height: 28px;
           
width: 82px;
           
text-align: center;
           
line-height: 25px;
           
border: 1px solid #42a42b;
           
color: #69b856;
           
background: #fff;
           
outline: none
       
}

       
#yzm {
           
width: 180px
       
}

       
.load {
           
border: 5px dotted #fff;
           
border-radius: 50%;
           
border-top: 5px dotted #a3f78e;
           
border-left: 5px dotted #b1ff9e;
           
width: 40px;
           
height: 40px;
           
position: absolute;
           
left: 50%;
           
top: 50%;
           
margin-left: -20px;
           
display: none;
           
animation: l 1s ease-out 0s infinite;
           
z-index: 99
       
}

@keyframes l {
           
0% {
               
transform: rotate(0deg)
           
}

           
100% {
               
transform: rotate(360deg)
           
}}

       
.verify {
           
width: 280px;
           
height: 30px;
           
margin-top: 10px
       
}

       
#verify_box {
           
width: 280px;
           
height: 30px;
           
text-align: center;
           
line-height: 30px;
           
font-size: 14px;
           
color: #fff;
           
background-color: #d4d4d4
       
}

       
#verify_xbox {
           
height: 30px;
           
text-align: center;
           
line-height: 30px;
           
font-size: 14px;
           
color: #fff;
           
position: absolute;
           
background: #7bbb55
       
}

       
#btn2 {
           
cursor: pointer;
           
width: 54px;
           
height: 28px;
           
background-color: #fff;
           
border: solid 1px #d4d4d4;
           
float: right
       
}

       
.img {
           
height: 12px;
           
top: 0
       
}

        h6
{
           
margin: 0;
           
color: #ccc;
           
font-size: 12px
       
}

       
#mask {
           
text-align: center;
           
font-size: 30px;
           
color: #fff;
           
position: absolute;
           
top: 0;
           
right: 0;
           
left: 0;
           
bottom: 0;
           
background: #53bb39;
           
opacity: .8;
           
z-index: 99;
           
transform: scale(0);
           
transition: all 1s ease-out 2s
       
}
   
</style>
</head>
<body>
   
<form action="" autocomplete="off">
       
<input type="text" name="" id="na" placeholder="昵称"><img src="" alt=""><br>
       
<p>
            3~6个中文字符或数字或字母组合
       
</p>
       
<br>
       
<input type="password" name="" id="pawd" placeholder="密码"><img src="" alt=""><br>
       
<p>
            6~16个字符,区分大小写
       
</p>
       
<span id="ruo"></span><span id="zo"></span><span id="qiang"></span><br>
       
<input type="password" name="" id="pwd" placeholder="确认密码"><img src="" alt=""><br>
       
<p>
            请再次填写密码
       
</p>
       
<div class="verify">
           
<div id="verify_box">
               
<div id="verify_xbox">
                  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0