Html+Css+Js注册验证(正则表达式)

最新推荐文章于 2024-05-08 09:58:48 发布

gly_technology

最新推荐文章于 2024-05-08 09:58:48 发布

阅读量1.9k

点赞数 4

文章标签： javascript html css

本文链接：https://blog.csdn.net/gly_technology/article/details/122686711

版权

HTML CSS JavaScript 表单验证用户体验

关键词由CSDN通过智能技术生成

Html部分

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link rel="stylesheet" type="text/css" href="css/index.css" />
       <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
       <form action="#" method="get">
           <span>用户名</span><input type="text" id="username" οnfοcus="getusername()" οnblur="loseusername()"/><div id="usernamemsg"></div><br>
           <span>手机号</span><input type="text" id="userphone" οnfοcus="getuserphone()" οnblur="loseuserphone()"/><div id="userphonemsg"></div><br>
           <span>密码</span><input type="password" id="userpwd1" οnfοcus="getuserpwd1()" οnblur="loseuserpwd1()"/><div id="userpwd1msg"></div><br>
           <span>确认密码</span><input type="password" id="userpwd2" οnblur="loseuserpwd2()"/><div id="userpwd2msg"></div><br>
           <input type="checkbox" id="usercheck" />阅读并接受<a href="#">《XX用户协议》</a><div id="usercheckmsg">验证用户是否接受百度用户协议</div><br>
           <input type="button" id="userbtn" value="注册" οnclick="usersubmit()"/>
       </form>
   </body>
</html>

Css部分

* {
margin: 0;
padding: 0;
}

form {
   width: 600px;
   height: 280px;
   border: solid 1px #ccc;
   margin: 200px auto;
   padding-top: 60px;
   position: relative;
}

span {
   display: inline-block;
   width: 80px;
   text-align: right;
}

input {
margin-top: 10px;
}

input[type=text],
input[type=password] {
   width: 200px;
   height: 30px;
   margin-left: 10px;
   border: solid 1px #ccc;
}

input[type=checkbox] {
margin-left: 90px;
}

input[type=button] {
   width: 205px;
   height: 30px;
   margin-left: 90px;
   background-color: #4490f7;
   color: #fff;
   border: none;
   border-radius: 3px;
}

a {
text-decoration: none;
}

div {
   width: 260px;
   position: absolute;
   left: 310px;
   top: 68px;
   padding: 5px 10px;
   background-color: #f9f9f9;
   color: #bdbdbd;
   display: none;
}

#userphonemsg {
top: 110px;
}

#userpwd1msg {
top: 153px;
}

#userpwd2msg {
top: 195px;
}

#usercheckmsg {
top: 227px;
}

Js部分

// 一、当用户名文本框获取当前输入焦点时，提示用户“设置后不可更改中英文均可，最长 14个英文或 7 个汉字”。
//用户名获得焦点
function getusername() {
   var usernamemsg = document.getElementById('usernamemsg');
   usernamemsg.style.color = '#bdbdbd';
   usernamemsg.style.backgroundColor = '#f9f9f9';
   usernamemsg.style.border = 'solid 1px';
   usernamemsg.innerHTML = '设置后不可更改中英文均可<br>最长 14个英文或 7 个汉字';
   usernamemsg.style.display = 'block';
}
//用户名失去焦点
function loseusername() {
   var usernamemsg = document.getElementById('usernamemsg');
   var username = document.getElementById('username');
   var reg = /^[0-9A-Za-z\u4e00-\u9fa5]{1,14}$/;
   if (username.value == '') {
       usernamemsg.innerText = 'X请您填写用户名';
       usernamemsg.style.color = 'red';
       usernamemsg.style.backgroundColor = '#fff';
       usernamemsg.style.border = 'none';
       usernamemsg.style.display = 'block';
       return false;
   } else {
       if (!reg.test(username.value)) {
           //验证不成功
           usernamemsg.innerText = "X请输入正确的用户名";
           usernamemsg.style.color = "red";
           usernamemsg.style.backgroundColor = '#fff';
           usernamemsg.style.border = 'none';
           usernamemsg.style.display = 'block';
           return false;
       } else {
           //验证成功
           usernamemsg.innerText = "√";
           usernamemsg.style.color = "green";
           usernamemsg.style.backgroundColor = '#fff';
           usernamemsg.style.border = 'none';
           usernamemsg.style.display = 'block';
           return true;
       }
       return true;
   }
}
// 二、当手机号文本框获取当前输入焦点时，提示用户“请输入中国大陆手机号,其他用户不可见”。
//手机号获得焦点
function getuserphone() {
   var userphonemsg = document.getElementById('userphonemsg');
   userphonemsg.style.color = '#bdbdbd';
   userphonemsg.style.backgroundColor = '#f9f9f9';
   userphonemsg.style.border = 'solid 1px';
   userphonemsg.innerHTML = '请输入中国大陆手机号<br>其他用户不可见';
   userphonemsg.style.display = 'block';
}
//手机号失去焦点
function loseuserphone() {
   var userphonemsg = document.getElementById('userphonemsg');
   var userphone = document.getElementById('userphone');
   var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0135678]|18[0-9]|14[579])[0-9]{8}$/;
   if (userphone.value == '') {
       userphonemsg.innerText = 'X请您填写手机号';
       userphonemsg.style.color = 'red';
       userphonemsg.style.backgroundColor = '#fff';
       userphonemsg.style.border = 'none';
       userphonemsg.style.display = 'block';
       return false;
   } else {
       if (!reg.test(userphone.value)) {
           //验证不成功
           userphonemsg.innerText = "X请输入正确的手机号";
           userphonemsg.style.color = "red";
           userphonemsg.style.backgroundColor = '#fff';
           userphonemsg.style.border = 'none';
           userphonemsg.style.display = 'block';
           return false;
       } else {
           //验证成功
           userphonemsg.innerText = "√";
           userphonemsg.style.color = "green";
           userphonemsg.style.backgroundColor = '#fff';
           userphonemsg.style.border = 'none';
           userphonemsg.style.display = 'block';
           return true;
       }
       return true;
   }
}
// 三、当密码文本框获取当前输入焦点时，提示用户“长度为 6~14 个字符；支持数字、大小写字母和标点符号；不允许有空格”。
//密码1获得焦点
function getuserpwd1() {
   var userpwd1msg = document.getElementById('userpwd1msg');
   userpwd1msg.style.color = '#bdbdbd';
   userpwd1msg.style.backgroundColor = '#f9f9f9';
   userpwd1msg.style.border = 'solid 1px';
   userpwd1msg.innerHTML = '长度为 6~14 个字符<br>支持数字、大小写字母和标点符号<br>不允许有空格';
   userpwd1msg.style.display = 'block';
}
//密码1失去焦点
function loseuserpwd1() {
   var userpwd1msg = document.getElementById('userpwd1msg');
   var userpwd1 = document.getElementById('userpwd1');
   var reg = /^[0-9a-zA-Z|\.]{6,14}$/;
   if (userpwd1.value == '') {
       userpwd1msg.innerText = 'X请您填写密码';
       userpwd1msg.style.color = 'red';
       userpwd1msg.style.backgroundColor = '#fff';
       userpwd1msg.style.border = 'none';
       userpwd1msg.style.display = 'block';
       return false;
   } else {
       if (!reg.test(userpwd1.value)) {
           //验证不成功
           userpwd1msg.innerText = "X请输入正确的密码";
           userpwd1msg.style.color = "red";
           userpwd1msg.style.backgroundColor = '#fff';
           userpwd1msg.style.border = 'none';
           userpwd1msg.style.display = 'block';
           return false;
       } else {
           //验证成功
           userpwd1msg.innerText = "√";
           userpwd1msg.style.color = "green";
           userpwd1msg.style.backgroundColor = '#fff';
           userpwd1msg.style.border = 'none';
           userpwd1msg.style.display = 'block';
           return true;
       }
       return true;
   }
}
// 四、验证密码和确认密码是否相同
//密码2失去焦点
function loseuserpwd2() {
   var userpwd2msg = document.getElementById('userpwd2msg');
   var userpwd1 = document.getElementById('userpwd1');
   var userpwd2 = document.getElementById('userpwd2');
   if (userpwd2.value == '') {
       userpwd2msg.innerText = 'X请您填写密码';
       userpwd2msg.style.color = 'red';
       userpwd2msg.style.backgroundColor = '#fff';
       userpwd2msg.style.border = 'none';
       userpwd2msg.style.display = 'block';
       return false;
   } else {
       if (userpwd1.value == userpwd2.value) {
           //验证成功
           userpwd2msg.innerText = "√";
           userpwd2msg.style.color = "green";
           userpwd2msg.style.backgroundColor = '#fff';
           userpwd2msg.style.border = 'none';
           userpwd2msg.style.display = 'block';
           return true;
       } else {
           //验证不成功
           userpwd2msg.innerText = "X请输入一样的密码";
           userpwd2msg.style.color = "red";
           userpwd2msg.style.backgroundColor = '#fff';
           userpwd2msg.style.border = 'none';
           userpwd2msg.style.display = 'block';
           return false;
       }
       return true;
   }
}
// 单击注册按钮
function usersubmit() {
   // 提交数据时验证表单是否正确填写（验证用户是否接受百度用户协议，如果没有提示用户）。
   var usercheck = document.getElementById('usercheck');
   var usercheckmsg = document.getElementById('usercheckmsg');
   if (usercheck.checked == true) {
       var userchecked = true;
       usercheckmsg.style.display = 'none';
   } else {
       usercheckmsg.innerText = '请钩选阅读并接受《XX用户协议》';
       usercheckmsg.style.color = "red";
       usercheckmsg.style.backgroundColor = '#fff';
       usercheckmsg.style.border = 'none';
       usercheckmsg.style.display = 'block';
       userchecked = false;
   }
   // 当用户名、手机号、密码文本框失去当前输入焦点时，验证用户输入的信息是否符合要求并提示用户，确认密码文本框失去当前输入焦点时，验证密码和确认密码是否相同，并提示用户（用户名、手机号、密码、确认密码为必填项）。
   // 当全部正确则显示注册成功，否则就显示信息填写不对，请核对重新提交！
   loseusername();
   loseuserphone();
   loseuserpwd1();
   loseuserpwd2();
   if (loseusername() == true && loseuserphone() == true && loseuserpwd1() == true && loseuserpwd2() == true &&
       userchecked == true) {
       alert('注册成功');
   } else {
       alert('信息填写不对，请核对重新提交！');
   }
}