每一个input框在输入中或者输入后都会验证用户输入的内容是否与正则想违背
并在用户输入结束之后给出信息告知用户输入的内容是否合乎规范
首先的第一步是创建一个form表单
并且为表单修饰样式
代码如下
<div class="loding">
<form action="" class="head">
<p><span>用户名</span><input type="text" name="username" placeholder="请设置用户名"></p>
<p><span>手机号</span><input type="text" name="phone" placeholder="可用于登录和找回密码"></p>
<p><span id="pwd">密码</span><input type="password" name="pwd" placeholder="请设置登录密码"></p>
<p><span>验证码</span><input type="text" id="sure" name="sure" placeholder="请输入验证码">
<button>
<div id="code"></div>
</button></p>
<input type="checkbox" id="check">
<span class="tet">阅读并接受《<a href="https://passport.baidu.com/static/passpc-account/html/protocal.html">百度用户协议</a>》及《<a href="http://privacy.baidu.com/mdetail?id=288">百度隐私权保护声明</a>》</span><br>
<div id="logo"><a href="#">注册</a></div>
</form>
</div>
<div id="name" class="hide" >设置后不可更改<br>中英文均可，最长14个英文或7个汉字</div>
<div id="name1" class="hide" >请输入符合要求的用户名</div>
<div id="name2" class="hide"></div>
<div id="phone" class="hide" >请输入中国大陆手机号,其他用户不可见</div>
<div id="phone1" class="hide">手机号码格式不正确</div>
<div id="phone2" class="hide"></div>
<div id="password" class="hide">
<ul>
<li>长度为8-14个字符</li>
<li>支持数字,大小写字母</li>
<li>不允许有空格</li>
</ul>
</div>
<div id="password1" class="hide"></div>
<div id="password2" class="hide"></div>
<div id="password3" class="hide"></div>
<div id="password4" class="hide"></div>
<div id="pass" class="hide">请输入正确的密码</div>
<div id="code1" class="hide">请您输入正确的验证码</div>
<div id="code2" class="hide"></div>
<div id="end" class="hide">请勾选"阅读并接受百度用户协议"</div>
<script src='loding.js'></script>
<img src="img/魏无羡.jpg" alt="">
<div id="head">有问题?<br>找夷陵老祖魏无羡</div>
HTML代码中书写了form表单以及一些在初始情况下隐藏的内容
.loding{
width: 600px;
height: 400px;
background-color: white;
margin-left: 100px;
margin-top: 100px;
position: relative;
}
a{
text-decoration: none;
}
#logo a{
color: white;
padding-left: 160px;
line-height: 50px;
cursor: pointer;
}
.tet a:hover{
cursor: pointer;
text-decoration: underline;
}
#pwd{
margin-left: 44px;
}
.head{
padding-top: 25px;
}
p span{
font-weight: bold;
font-size: 14px;
margin-left: 30px;
}
p input{
height: 33px;
width: 360px;
margin-left: 10px;
padding-left: 5px;
}
#sure{
width: 190px;
height: 33px;
padding-left: 5px;
margin-left:10px;
}
p button{
width: 160px;
height: 36px;
border: 0px;
margin: 0;
padding: 0;
font-family: "宋体";
margin-left: 5px;
font-size: 14px;
cursor: pointer;
position: relative;
top: 2px;
}
#check{
width: 12px;
height: 12px;
margin-left: 83px;
margin-top: 13px;
}
.tet{
font-size: 12px;
}
#logo{
width: 372px;
height: 50px;
font-family: "宋体";
border: 0px;
border-radius: 3px;
background-color: blue;
margin-left : 82px;
margin-top: 20px;
font-size: 17px;
font-weight: bold;
}
#logo:hover{
cursor: pointer;
}
.note{
line-height: 16px;
font-size: 12px;
}
#code{
font-weight: bold;
font-size: 20px;
}
#code1{
font-size: 12px;
width: 220px;
color: red;
position: absolute;
top: 320px;
left: 570px;
padding-left: 20px;
background-image: url(img/01.png);
background-repeat: no-repeat;
}
#code2{
width: 220px;
height: 30px;
position: absolute;
top: 320px;
left: 570px;
padding-left: 20px;
background-image: url(img/02.png);
background-repeat: no-repeat;
}
#name{
font-size: 12px;
width: 220px;
color: gray;
position: absolute;
top: 145px;
left: 570px;
}
#name1{
font-size: 12px;
width: 220px;
color: red;
position: absolute;
top: 152px;
left: 570px;
padding-left: 20px;
background-image: url(img/01.png);
background-repeat: no-repeat;
}
#name2{
width: 220px;
height: 30px;
position: absolute;
top: 152px;
left: 570px;
padding-left: 20px;
background-image: url(img/02.png);
background-repeat: no-repeat;
}
#phone{
font-size: 12px;
width: 220px;
color: gray;
position: absolute;
top: 208px;
left: 570px;
}
#phone1{
font-size: 12px;
width: 220px;
color: red;
position: absolute;
top: 206px;
left: 570px;
padding-left: 20px;
background-image: url(img/01.png);
background-repeat: no-repeat;
}
#phone2{
width: 220px;
height: 30px;
position: absolute;
top: 206px;
left: 570px;
padding-left: 20px;
background-image: url(img/02.png);
background-repeat: no-repeat;
}
#password{
font-size: 13px;
width: 240px;
height: 70px;
background-color: #f9f9f9;
position: absolute;
font-family: '宋体';
left: 570px;
top: 250px;
}
#password1{
width: 240px;
height: 70px;
background-image: url(img/03.png);
background-repeat: no-repeat;
position: absolute;
left: 595px;
top: 265px;
}
#password2{
width: 240px;
height: 70px;
background-image: url(img/03.png);
background-repeat: no-repeat;
position: absolute;
left: 595px;
top: 280px;
}
#password3{
width: 240px;
height: 70px;
background-image: url(img/03.png);
background-repeat: no-repeat;
position: absolute;
left: 595px;
top: 295px;
}
#password4{
width: 220px;
height: 30px;
position: absolute;
top: 262px;
left: 570px;
padding-left: 20px;
background-image: url(img/02.png);
background-repeat: no-repeat;
}
#pass{
font-size: 12px;
width: 300px;
color: red;
position: absolute;
top: 262px;
left: 570px;
padding-left: 20px;
background-image: url(img/01.png);
background-repeat: no-repeat;
}
#end{
font-size: 12px;
width: 300px;
color: red;
position: absolute;
top: 375px;
left: 510px;
padding-left: 20px;
background-image: url(img/01.png);
background-repeat: no-repeat;
}
.hide{
display: none;
}
.has{
display: inline-block;
}
img{
width: 80px;
height: 80px;
position: absolute;
top: 30px;
left: 190px;
}
#head{
height: 60px;
width: 400px;
line-height: 30px;
padding-left: 10px;
color: gray;
font-size: 16px;
font-family: '楷体';
position: absolute;
top: 30px;
left: 300px;
cursor: pointer;
}
css样式中页面的基本美化已完成，初始页面需要隐藏的也已经隐藏
var inp = document.forms[0].elements;
var cod = document.getElementById('code');
// 定义一个函数为验证码添加随机数
function jie () {
var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
for(var i = 0,tet = ''; i < 4; i++){
var j = Math.floor(Math.random()*62);
tet = tet + str[j];
}
cod.innerHTML = tet;
}
jie();
// 给随机数追加点击事件，每次点击都会调用生成随机数的函数从而更新新的随机数
inp[4].onclick = function () {
jie();
}
// 用户名获取焦点onfocus
inp[0].onfocus = function () {
document.getElementById('name').className = 'has';
document.getElementById('name1').className = 'hide';
}
// 用户名失去焦点事件onblur
inp[0].onblur = function () {
document.getElementById('name').className = 'hide';
var reg = /(^[\u4e00-\u9fa5]{1,7}$)|(^[a-zA-Z]{1,14}$)/;
if(reg.test(this.value)){
document.getElementById('name2').className = 'has';
}else{
document.getElementById('name1').className = 'has';
document.getElementById('name2').className = 'hide';
}
}
// 手机号获取焦点onfocus
inp[1].onfocus = function () {
document.getElementById('phone').className = 'has';
document.getElementById('phone1').className = 'hide';
}
// 手机号失去焦点事件onblur
inp[1].onblur = function () {
document.getElementById('phone').className = 'hide';
var reg = /^[1](3|4|5|6|7|8|9)[0-9]{9}$/;
if(reg.test(this.value)){
document.getElementById('phone2').className = 'has';
}else{
document.getElementById('phone1').className = 'has';
document.getElementById('phone2').className = 'hide';
}
}
// 密码获取焦点onfocus
inp[2].onfocus = function () {
document.getElementById('password').className = 'has';
document.getElementById('pass').className = 'hide';
}
// 密码失去焦点事件onblur
inp[2].onblur = function () {
document.getElementById('password').className = 'hide';
document.getElementById('password1').className = 'hide';
document.getElementById('password2').className = 'hide';
document.getElementById('password3').className = 'hide';
var reg = /^(\d|[a-zA-Z]){8,14}$/;
if(reg.test(this.value)){
document.getElementById('pass').className = 'hide';
document.getElementById('password4').className = 'has';
}else{
document.getElementById('password4').className = 'hide';
document.getElementById('pass').className = 'has';
}
}
// 验证码获取焦点
inp[3].onfocus = function () {
document.getElementById('code1').className = 'has';
document.getElementById('code1').style.color = 'gray';
document.getElementById('code1').style.backgroundImage = 'url()';
if(cod.innerHTML == inp[3].value){
document.getElementById('code1').className = 'hide';
}else{
document.getElementById('code2').className = 'hide';
}
}
// 验证码失去焦点
inp[3].onblur = function () {
if(cod.innerHTML == inp[3].value){
document.getElementById('code1').className = 'hide';
document.getElementById('code2').className = 'has';
}else{
document.getElementById('code2').className = 'hide';
document.getElementById('code1').className = 'has';
document.getElementById('code1').style.color = 'red';
document.getElementById('code1').style.backgroundImage = 'url(img/01.png)';
}
}
// 输入密码时的按键事件,根据每一次按键之后密码框里的value值来判断是否满足正则的条件
inp[2].onkeyup = function () {
var reg1 = /\s/;
var reg2 = /^(\d|[a-zA-Z])*$/;
var reg3 = /^.{8,14}$/;
var paw1 = document.getElementById('password1');
var paw2 = document.getElementById('password2');
var paw3 = document.getElementById('password3');
if(reg1.test(this.value)){
paw3.style.backgroundImage = 'url(img/03.png)';
paw3.className = 'has';
}else{
paw3.style.backgroundImage = 'url(img/04.png)';
paw3.className = 'has';
}
if(reg2.test(this.value)){
paw2.style.backgroundImage = 'url(img/04.png)';
paw2.className = 'has';
}else{
paw2.style.backgroundImage = 'url(img/03.png)';
paw2.className = 'has';
}
if(reg3.test(this.value)){
paw1.style.backgroundImage = 'url(img/04.png)';
paw1.className = 'has';
}else{
paw1.style.backgroundImage = 'url(img/03.png)';
paw1.className = 'has';
}
}
// 注册按钮的点击事件,找出未满足条件的form表单并给出警示
document.getElementsByTagName('a')[2].onclick = function () {
if(inp[0].value == ''){
document.getElementById('name1').className = 'has';
}
if(inp[1].value == ''){
document.getElementById('phone1').className = 'has';
}
if(inp[2].value == ''){
document.getElementById('pass').className = 'has';
}
if(inp[3].value == ''){
document.getElementById('code1').className = 'has';
}
if(inp[5].checked == false){
document.getElementById('end').className = 'has';
}else{
document.getElementById('end').className = 'hide';
}
}
这些就都是js代码
目的是为了实现判断input框内的输入值是否与我们所规定的正则相满足
并根据这些信息作出不同的提示或则警告
从而方便普通用户更好的注册我们的账号