Js基础学习之-- 利用正则表达式验证 模拟注册界面
2016-07-27 19:38
906 查看
注册界面
要求：用户名只能是字母或者数字或者下划线，不能以数字开头，用户名长度在6到20之间
密码两次验证必须一致，用户名密码不能为空。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>模拟注册</title>
<style type="text/css">
*{margin:0;
padding:0;
font-size:14px;
font-famliy:"微软雅黑";
font-style:normal; }
body{background:#FBFBFB;}
.container{
border:solid 1px #F1F1F1;
width:600px;
height:600px;
background:#fff;
margin:20px auto;
padding-bottom:10px;
}
.container h1{
font-size:22px;
font-family:微软雅黑;
text-align:center;
color:#333;
display:block;
margin:20px;
border:0px solid gray;
}
.div1{
margin-left:55px;
}
#Name,#Pwd1,#Pwd2,#telphone{
color:gray;
height:25px;
width:200px;
font-size:10px;
padding-left:10px;
margin-top:10px;
}
#btn1,#btn2{
height:25px;
width:60px;
display:block;
float:left;
margin-left:70px;
margin-top:20px;
}
#sex1,#sex2{
margin-left:10px;
margin-top:20px;
line-height:30px;
width:13px;
border:1px solid gray;
}
#phone1{
width:45px;
}
#phone2{
width:80px;
}
#phone3{
width:45px;
}
#phone1,#phone2,#phone3{
color:gray;
height:25px;
font-size:10px;
padding-left:5px;
margin-top:10px;
}
#hobby1,#hobby2,#hobby3,#hobby4,#hobby5,#hobby6{
color:gray;
height:25px;
line-height:30px;
font-size:10px;
width:13px;
vertical-align:middle;
margin-left:5px;
margin-top:10px;
}
#lname,#ltelphone,#lphone,#lpass1,#lpass2{
color:#FF0000;
font-size:10px;
}
</style>
<script>
window.onload= function(){
var userName = document.getElementById("Name");
var lableName = document.getElementById("lname");
var password1 = document.getElementById("Pwd1");
var password2 = document.getElementById("Pwd2");
var labelPassword1 = document.getElementById("lpass1");
var labelPassword2 = document.getElementById("lpass2");
var telphone = document.getElementById("telphone");
var labelTelphone = document.getElementById("ltelphone");
var phone1 = document.getElementById("phone1");
var phone2 = document.getElementById("phone2");
var phone3 = document.getElementById("phone3");
var labelPhone = document.getElementById("lphone");
userName.onblur = function(){
var nameValue = userName.value;
var pattern = /^[a-zA-Z_]\w{5,19}$/g;
if(nameValue =="" || nameValue==null){
lableName.innerHTML = "用户名不能为空!";
}
else if(pattern.test(nameValue)){
lableName.innerHTML = "正确!";
}
else{
lableName.innerHTML = "数字不能开头,长度在6-20位之间！";
}
}
password1.onblur = function(){
var passValue = password1.value;
var pattern = /^\w{6,15}$/g;
if(pattern.test(passValue)){
labelPassword1.innerHTML = "正确!";
}
else if(passValue =="" || passValue==null){
labelPassword1.innerHTML = "密码不能为空!";
}
else{
labelPassword1.innerHTML = "密码长度在6-15位之间！";
}
}
password2.onblur = function(){
var pass1Value = password1.value;
var pass2Value = password2.value;
if(pass2Value =="" || pass2Value==null){
labelPassword2.innerHTML = "密码不能为空!";
}
else if(pass1Value == pass2Value){
labelPassword2.innerHTML = "输入正确!";
}
else if(pass1Value!=pass2Value){
labelPassword2.innerHTML = "两次密码输入不一致!";
}
else{
labelPassword2.innerHTML = "密码长度在6-15位之间！";
}
}
telphone.onblur = function(){
var telValue = telphone.value;
var pattern = /^1(83|52|38|)\d{8}$/g;
if(pattern.test(telValue)){
labelTelphone.innerHTML = "正确!";
}
else if(telValue =="" || telValue==null){
labelTelphone.innerHTML = "手机号码不能为空!";
}
else{
labelTelphone.innerHTML = "长度必须11位！";
}
}
phone1.onblur = function(){
var phone1Value = phone1.value;
var pattern = /^\d{3,4}$/g;
if(pattern.test(phone1Value)){
labelPhone.innerHTML = "区号正确!";
}
else if(phone1Value =="" || phone1Value==null){
labelPhone.innerHTML = "区号不能为空!";
}
else{
labelPhone.innerHTML = "区号必须3-4位！";
}
}
phone2.onblur = function(){
var phone2Value = phone2.value;
var pattern = /^\d{7,8}$/g;
if(pattern.test(phone2Value)){
labelPhone.innerHTML = "号码正确!";
}
else if(phone2Value == "" || phone2Value == null){
labelPhone.innerHTML = "号码不能为空!";
}
else{
labelPhone.innerHTML = "号码必须7-8位！";
}
}
phone3.onblur = function(){
var phone3Value = phone3.value;
var pattern = /^(\d{1,4})?$/g;
if(pattern.test(phone3Value)){
labelPhone.innerHTML = "正确!";
}
else{
labelPhone.innerHTML = "错误！";
}
}
}
</script>
</head>
<body>
<div class="container">
<h1>注册</h1>
<div class="div1">
用户名： <input type = "text" placeholder = "输入用户名" id = "Name"/>
<label id="lname"></label><br/>
密码： <input type = "text" placeholder = "输入密码" id = "Pwd1"/>
<label id="lpass1"></label><br/>
确认密码：<input type = "text" placeholder = "再次输入密码" id = "Pwd2"/>
<label id="lpass2"></label><br/>
性别：<input type="radio" name="sex" id="sex1"/> 男
<input type="radio" name="sex" id="sex2"/> 女<br/>
手机号码：<input type="text" placeholder="手机号" id="telphone"/>
<label id="ltelphone"></label><br/>
固定电话：<input type="text" id="phone1"/>-<input type="text" id="phone2"/>-<input type="text" id="phone3"/>
<label id="lphone"></label><br/>
兴趣爱好:<input type="checkbox" id="hobby1"/>全选<input type="checkbox" id="hobby2"/>音乐<input type="checkbox" id="hobby3"/>美术<input type="checkbox" id="hobby4"/>运动<input type="checkbox" id="hobby5"/>读书<input type="checkbox" id="hobby6"/>编程<br/>
<input type="button" value="注册" id="btn1"/>
<input type="reset" value="重置" id="btn2"/>
</div>
</div>
</body>
</html>
要求：用户名只能是字母或者数字或者下划线，不能以数字开头，用户名长度在6到20之间
密码两次验证必须一致，用户名密码不能为空。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>模拟注册</title>
<style type="text/css">
*{margin:0;
padding:0;
font-size:14px;
font-famliy:"微软雅黑";
font-style:normal; }
body{background:#FBFBFB;}
.container{
border:solid 1px #F1F1F1;
width:600px;
height:600px;
background:#fff;
margin:20px auto;
padding-bottom:10px;
}
.container h1{
font-size:22px;
font-family:微软雅黑;
text-align:center;
color:#333;
display:block;
margin:20px;
border:0px solid gray;
}
.div1{
margin-left:55px;
}
#Name,#Pwd1,#Pwd2,#telphone{
color:gray;
height:25px;
width:200px;
font-size:10px;
padding-left:10px;
margin-top:10px;
}
#btn1,#btn2{
height:25px;
width:60px;
display:block;
float:left;
margin-left:70px;
margin-top:20px;
}
#sex1,#sex2{
margin-left:10px;
margin-top:20px;
line-height:30px;
width:13px;
border:1px solid gray;
}
#phone1{
width:45px;
}
#phone2{
width:80px;
}
#phone3{
width:45px;
}
#phone1,#phone2,#phone3{
color:gray;
height:25px;
font-size:10px;
padding-left:5px;
margin-top:10px;
}
#hobby1,#hobby2,#hobby3,#hobby4,#hobby5,#hobby6{
color:gray;
height:25px;
line-height:30px;
font-size:10px;
width:13px;
vertical-align:middle;
margin-left:5px;
margin-top:10px;
}
#lname,#ltelphone,#lphone,#lpass1,#lpass2{
color:#FF0000;
font-size:10px;
}
</style>
<script>
window.onload= function(){
var userName = document.getElementById("Name");
var lableName = document.getElementById("lname");
var password1 = document.getElementById("Pwd1");
var password2 = document.getElementById("Pwd2");
var labelPassword1 = document.getElementById("lpass1");
var labelPassword2 = document.getElementById("lpass2");
var telphone = document.getElementById("telphone");
var labelTelphone = document.getElementById("ltelphone");
var phone1 = document.getElementById("phone1");
var phone2 = document.getElementById("phone2");
var phone3 = document.getElementById("phone3");
var labelPhone = document.getElementById("lphone");
userName.onblur = function(){
var nameValue = userName.value;
var pattern = /^[a-zA-Z_]\w{5,19}$/g;
if(nameValue =="" || nameValue==null){
lableName.innerHTML = "用户名不能为空!";
}
else if(pattern.test(nameValue)){
lableName.innerHTML = "正确!";
}
else{
lableName.innerHTML = "数字不能开头,长度在6-20位之间！";
}
}
password1.onblur = function(){
var passValue = password1.value;
var pattern = /^\w{6,15}$/g;
if(pattern.test(passValue)){
labelPassword1.innerHTML = "正确!";
}
else if(passValue =="" || passValue==null){
labelPassword1.innerHTML = "密码不能为空!";
}
else{
labelPassword1.innerHTML = "密码长度在6-15位之间！";
}
}
password2.onblur = function(){
var pass1Value = password1.value;
var pass2Value = password2.value;
if(pass2Value =="" || pass2Value==null){
labelPassword2.innerHTML = "密码不能为空!";
}
else if(pass1Value == pass2Value){
labelPassword2.innerHTML = "输入正确!";
}
else if(pass1Value!=pass2Value){
labelPassword2.innerHTML = "两次密码输入不一致!";
}
else{
labelPassword2.innerHTML = "密码长度在6-15位之间！";
}
}
telphone.onblur = function(){
var telValue = telphone.value;
var pattern = /^1(83|52|38|)\d{8}$/g;
if(pattern.test(telValue)){
labelTelphone.innerHTML = "正确!";
}
else if(telValue =="" || telValue==null){
labelTelphone.innerHTML = "手机号码不能为空!";
}
else{
labelTelphone.innerHTML = "长度必须11位！";
}
}
phone1.onblur = function(){
var phone1Value = phone1.value;
var pattern = /^\d{3,4}$/g;
if(pattern.test(phone1Value)){
labelPhone.innerHTML = "区号正确!";
}
else if(phone1Value =="" || phone1Value==null){
labelPhone.innerHTML = "区号不能为空!";
}
else{
labelPhone.innerHTML = "区号必须3-4位！";
}
}
phone2.onblur = function(){
var phone2Value = phone2.value;
var pattern = /^\d{7,8}$/g;
if(pattern.test(phone2Value)){
labelPhone.innerHTML = "号码正确!";
}
else if(phone2Value == "" || phone2Value == null){
labelPhone.innerHTML = "号码不能为空!";
}
else{
labelPhone.innerHTML = "号码必须7-8位！";
}
}
phone3.onblur = function(){
var phone3Value = phone3.value;
var pattern = /^(\d{1,4})?$/g;
if(pattern.test(phone3Value)){
labelPhone.innerHTML = "正确!";
}
else{
labelPhone.innerHTML = "错误！";
}
}
}
</script>
</head>
<body>
<div class="container">
<h1>注册</h1>
<div class="div1">
用户名： <input type = "text" placeholder = "输入用户名" id = "Name"/>
<label id="lname"></label><br/>
密码： <input type = "text" placeholder = "输入密码" id = "Pwd1"/>
<label id="lpass1"></label><br/>
确认密码：<input type = "text" placeholder = "再次输入密码" id = "Pwd2"/>
<label id="lpass2"></label><br/>
性别：<input type="radio" name="sex" id="sex1"/> 男
<input type="radio" name="sex" id="sex2"/> 女<br/>
手机号码：<input type="text" placeholder="手机号" id="telphone"/>
<label id="ltelphone"></label><br/>
固定电话：<input type="text" id="phone1"/>-<input type="text" id="phone2"/>-<input type="text" id="phone3"/>
<label id="lphone"></label><br/>
兴趣爱好:<input type="checkbox" id="hobby1"/>全选<input type="checkbox" id="hobby2"/>音乐<input type="checkbox" id="hobby3"/>美术<input type="checkbox" id="hobby4"/>运动<input type="checkbox" id="hobby5"/>读书<input type="checkbox" id="hobby6"/>编程<br/>
<input type="button" value="注册" id="btn1"/>
<input type="reset" value="重置" id="btn2"/>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- msql 正则表达式
- 正则表达式
- javascript实现10进制转为N进制数
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 最后一次说说闭包
- Ajax
- HTML5调用摄像头实例
- 2019年开发人员应该学习的8个JavaScript框架
- Powershell 创建炫丽美观的Html报表
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 设计模式---状态模式在web前端中的应用