html+css+javaScript实现一个简单的注册界面

心已赠人 2022-11-25 04:26 178阅读 0赞

## html+css+javaScript实现一个简单的注册界面 ##

自学html，css，js也有一小段时间了，尝试着做点东西来巩固一下，就决定实现这个简单的注册界面。实现的注册界面很普通，没有加上华丽的装饰，但能实现基本的注册界面应有的效果。

原版使用DOM的注册界面的效果：  
1.未输入或输入框为空时会有默认值提示输入信息  
2.输入框获取焦点时时会清空默认值  
3.输入不符合要求时会有警告提示  
4.全部信息未输入正确时无法注册提交  
5.地址选择时，选择省份后会有该省份相应的市提供选择

注册界面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc5MTk0Mg_size_16_color_FFFFFF_t_70]  
附上代码：（代码里有详细的注释）  
logininterface.html

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <link rel="stylesheet" type="text/css" href="logininterface.css">
    </head>
    <body>
    <h1 class="center">注册界面</h1>
    
    <form action="xxx" method="get">
    <table class="tablecenter "
    
    <tr>
    <td>姓名:</td>
    <td><input type="text" value="请输入你的姓名" class="center" id="name"  name="user"></td>
    <td id="namewarn" class="warn"></td>
    </tr>
    
    
    <tr>
    <td>性别:</td>
    <td><input type="radio" name="gender" value="female" id="female">Female<input type="radio" name="gender" value="male" id="male">Male</td>
    <td id="genderwarn" class="warn"></td>
    </tr>
    
    
    <tr>
    <td>邮箱:</td>
    <td><input type="text" value="请输入你的邮箱" class="center"  id="email" name="email"></td>
    <td id="emailwarn" class="warn"></td>
    </tr>
    
    
    <tr>
    <td>手机号:</td>
    <td><input type="text" value="请输入你的手机号" class="center" id="phone" name="phone"></td>
    <td id="phonewarn" class="warn"></td>
    </tr>
    
    
    <tr>
    <td>地址:</td>
    <td>
    <select id="province">
    <option>-请选择省-</option>
    </select>
    <label>省</lable>
    <select id="city">
    <option>-请选择市-</option>
    </select>
    <label>市</lable>
    </td>
    <td id="addresswarn" class="warn"></td>
    </tr>
    
    
    <tr>
    <td>密码:</td>
    <td><input type="text" value="请输入你的密码" class="center" id="password" name="password"></td>
    <td id="passwordwarn" class="warn"></td>
    </tr>
    
    
    <tr>
    <td>确认密码:</td>
    <td><input type="text" value="请确认你的密码" class="center" id="password2"></td>
    <td id="password2warn" class="warn"></td>
    </tr>
    
    
    <tr>
    <td><input type="reset" value="清除重置" id="reset"></td>
    <td><input type="button" value="注册" id="submit"></td>
    <td><input type="button" value="other"></td>
    </tr>
    
    </table>
    </form>
    
    <script type="text/javascript" src="logininterface.js"></script>  
        
        
    </body>
    </html>

logininterface.css

/*注册界面的css*/
    .center {
          /*标签内容居中*/
    	text-align:center; 
    }
    
    .tablecenter {
            /*表格*/ 
    	text-align:center;
    	margin: 0 auto;
    }
    
    tr {
        
    	height:50px;
    }
    
    .warn {
          /*警告*/
    	color:red;
    }

logininterface.js（原版使用DOM，没用到jQuery库）

/*注册界面的js*/
    
    /*name界面*/
    var namewarn=false;
    var nameEle=document.getElementById("name");
    var nameWarnEle=document.getElementById("namewarn");
    namepattern=/^[\u4E00-\u9FA5]{2,4}$/;   /*name的正则模板*/
    nameEle.onfocus=function(ev){
          /*获取焦点*/
    	if (nameEle.value=="请输入你的姓名"){
        
    		this.value="";
    	}
    }
    nameEle.onblur=function(ev) {
          /*失去焦点*/
    	if (nameEle.value==""){
        
    		this.value="请输入你的姓名";
    	}
    	if (!namepattern.test(nameEle.value)){
        nameWarnEle.innerHTML="名字输入错误";};  /*失去焦点进行内容判断*/
    	if (namepattern.test(nameEle.value)){
        nameWarnEle.innerHTML="";namewarn=true;};
    }
    
    /*性别界面*/
    var genderwarn=false;
    var femaleEle=document.getElementById("female");
    var maleEle=document.getElementById("male");
    var genderWarnEle=document.getElementById("genderwarn");
    femaleEle.onchange=function(ev){
        
    	genderwarn=true;
    }
    maleEle.onchange=function(ev){
        
    	genderwarn=true;
    }
    
    
    /*邮箱界面*/
    var emailwarn=false;
    var emailEle=document.getElementById("email");
    var emailWarnEle=document.getElementById("emailwarn");
    emailpattern=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;  /*email的正则模板*/
    emailEle.onfocus=function(ev){
            /*获取焦点*/
    	if (emailEle.value=="请输入你的邮箱"){
        
    		this.value="";
    	}
    }
    emailEle.onblur=function(ev) {
            /*失去焦点*/
    	if (emailEle.value==""){
        
    		this.value="请输入你的邮箱";
    	}
    	if(!emailpattern.test(emailEle.value)){
        emailWarnEle.innerHTML="邮箱格式错误";};    /*失去焦点进行内容判断*/
    	if(emailpattern.test(emailEle.value)){
        emailWarnEle.innerHTML="";emailwarn=true;};
    }
    
    
    /*手机号界面*/
    var phonewarn=false;
    var phoneEle=document.getElementById("phone");
    var phoneWarnEle=document.getElementById("phonewarn");
    phonepattern=/^1[3589]\d{9}$/;  /*phone的正则模板*/  
    phoneEle.onfocus=function(ev){
              /*获取焦点*/
    	if (phoneEle.value=="请输入你的手机号"){
        
    		this.value="";
    	}
    }
    phoneEle.onblur=function(ev) {
            /*失去焦点*/
    	if (phoneEle.value==""){
        
    		this.value="请输入你的手机号";
    	}
    	if(!phonepattern.test(phoneEle.value)){
        phoneWarnEle.innerHTML="手机号码输入错误";};   /*失去焦点进行内容判断*/
    	if(phonepattern.test(phoneEle.value)){
        phoneWarnEle.innerHTML="";phonewarn=true;};
    }
    
    /*地址界面*/
    var addresswarn=false;
    var provinceEle=document.getElementById("province");
    var cityEle=document.getElementById("city");
    var addressWarnEle=document.getElementById("addresswarn");
    var data={
        
    	"广东":["广州市","佛山市","湛江市","清远市","河源市"],
    	"福建":["泉州市","福州市","厦门市","漳州市","龙岩市"],
    	"浙江":["杭州市","宁波市","金华市","绍兴市","温州市"],
    };
    for (var i in data){
        
    	var tmp = document.createElement("option");
    	tmp.innerText=i;
    	provinceEle.appendChild(tmp);
    }
    provinceEle.onchange = function (ev){
        
    	addresswarn=true;
    	cityEle.innerHTML="";
    	var cityArray=data[this.value];
    	for (var j in cityArray){
        
    		var tmp=document.createElement("option");
    		tmp.innerText=cityArray[j];
    		cityEle.appendChild(tmp);
    	}
    }
    
    
    /*密码界面*/
    var password1warn=false;
    var pawd;   
    var passwordEle=document.getElementById("password");
    var passwordWarnEle=document.getElementById("passwordwarn");
    passwordpattern=/^[a-zA-Z0-9]{6,12}$/;  /*password的正则模板*/ 
    passwordEle.onfocus=function(ev){
        	/*获取焦点*/
    	passwordEle.setAttribute("type","password");  /*开始输入时将密码屏蔽*/
    	if (passwordEle.value=="请输入你的密码"){
        
    		this.value="";
    	}
    }
    passwordEle.onblur=function(ev) {
            /*失去焦点*/
    	if (passwordEle.value==""){
        
    		passwordEle.setAttribute("type","text");   /*没输入时则不将密码屏蔽*/
    		this.value="请输入你的密码";
    	}
    	if(!passwordpattern.test(passwordEle.value)){
        passwordWarnEle.innerHTML="至少输入6至12个字符";};   /*失去焦点进行内容判断*/
    	if(passwordpattern.test(passwordEle.value)){
        passwordWarnEle.innerHTML="";password1warn=true;};
    	pawd=passwordEle.value;   /*记录密码，用于后面确认密码*/
    }
    
    
    /*确认密码界面*/
    var password2warn=false;
    var password2Ele=document.getElementById("password2");
    var password2WarnEle=document.getElementById("password2warn");
    password2Ele.onfocus=function(ev){
             /*获取焦点*/
        password2Ele.setAttribute("type","password");  /*开始输入时将密码屏蔽*/
    	if (password2Ele.value=="请确认你的密码"){
        
    		this.value="";
    	}
    }
    password2Ele.onblur=function(ev) {
           /*失去焦点*/
    	if (password2Ele.value==""){
        
    		password2Ele.setAttribute("type","text");   /*没输入时则不将密码屏蔽*/
    		this.value="请确认你的密码";
    	}
    	if(pawd!=password2Ele.value){
        password2WarnEle.innerHTML="两次输入的密码不匹配";};   /*失去焦点进行内容判断*/
    	if(pawd==password2Ele.value){
        password2WarnEle.innerHTML="";password2warn=true;};
    }
    
    /*清除重置按钮*/
    var resetEle=document.getElementById("reset");   //获取清除重置按钮的节点
    resetEle.onclick=function(ev){
        
    	passwordEle.setAttribute("type","text");   //清除重置后取消密码输入框的屏蔽
    	password2Ele.setAttribute("type","text");
    }
    
    /*注册按钮*/
    var submitEle=document.getElementById("submit");  //获取注册按钮的节点
    submitEle.onclick=function(ev){
        
    	/*对地址进行判断*/
    	if (!addresswarn){
          
    		addressWarnEle.innerHTML="请选择地址";
    	}
    	if (addresswarn) {
        
    		addressWarnEle.innerHTML="";
    	}
    	/*对性别进行判断*/
    	if (!genderwarn){
        
    		genderWarnEle.innerHTML="请选择性别";
    	}
    	if (genderwarn){
        
    		genderWarnEle.innerHTML="";
    	}
    	/*对所有的输入进行判断*/
    	if (namewarn&&genderwarn&&emailwarn&&phonewarn&&addresswarn&&password1warn&&password2warn){
        
    		submitEle.setAttribute("type","submit");
    	}
    }

使用jquery库的注册界面的效果：  
1.未输入或输入框为空时会有默认值提示输入信息  
2.输入框获取焦点时时会清空默认值  
3.输入不符合要求时会有警告提示（即时校验）  
4.全部信息未输入正确时无法注册提交  
5.地址选择时，选择省份后会有该省份相应的市提供选择

采用jQuery库的与原版采用DOM在js代码上有所改进：  
logininterface2.js（采用jQuery库）（html，css差别不大，参考上面)

/*Jquery注册界面的js*/
    
    /*name界面*/
    var namewarn=false;
    namepattern=/^[\u4E00-\u9FA5]{2,4}$/;   /*name的正则模板*/
    $("#name").focus(function (ev){
          /*输入框获取焦点*/
    	if ($(this).val() == "请输入你的姓名"){
        
    		$(this).val("");
    	}
    })
    $("#name").blur(function (ev){
           /*输入框失去焦点*/
    	if ($(this).val() == ""){
        
    		$(this).val("请输入你的姓名");
    	}
    })
    $("#name").on("input",function(ev){
            /*校验*/
    	if (!namepattern.test($(this).val())){
        $("#namewarn").html("名字输入错误");};
    	if (namepattern.test($(this).val())){
        $("#namewarn").html("");namewarn=true;};
    })
    
    /*性别界面*/
    var genderwarn=false;
    $("#male").change(function(ev){
        
    	genderwarn=true;
    })
    $("#female").change(function(ev){
        
    	genderwarn=true;
    })
    
    /*邮箱界面*/
    var emailwarn=false;
    emailpattern=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;  /*email的正则模板*/
    $("#email").focus(function (ev){
        
    	if ($(this).val() == "请输入你的邮箱"){
        
    		$(this).val("");
    	}
    })
    $("#email").blur(function (ev){
           /*输入框失去焦点*/
    	if ($(this).val() == ""){
        
    		$(this).val("请输入你的邮箱");
    	}
    })
    $("#email").on("input",function(ev){
            /*校验*/
    	if (!emailpattern.test($(this).val())){
        $("#emailwarn").html("邮箱输入错误");};
    	if (emailpattern.test($(this).val())){
        $("#emailwarn").html("");emailwarn=true;};
    })
    
    /*手机号界面*/
    var phonewarn=false;
    phonepattern=/^1[3589]\d{9}$/;  /*phone的正则模板*/ 
    $("#phone").focus(function (ev){
        
    	if ($(this).val() == "请输入你的手机号"){
        
    		$(this).val("");
    	}
    })
    $("#phone").blur(function (ev){
           /*输入框失去焦点*/
    	if ($(this).val() == ""){
        
    		$(this).val("请输入你的手机号");
    	}
    })
    $("#phone").on("input",function(ev){
            /*校验*/
    	if (!phonepattern.test($(this).val())){
        $("#phonewarn").html("邮箱输入错误");};
    	if (phonepattern.test($(this).val())){
        $("#phonewarn").html("");phonewarn=true;};
    })
    
    /*地址界面*/
    var addresswarn=false;
    var addressWarnEle=document.getElementById("addresswarn");
    var data={
        
    	"广东":["广州市","佛山市","湛江市","清远市","河源市"],
    	"福建":["泉州市","福州市","厦门市","漳州市","龙岩市"],
    	"浙江":["杭州市","宁波市","金华市","绍兴市","温州市"],
    };
    for (var i in data){
        
    	var tmp = document.createElement("option");
    	$(tmp).text(i);
    	$("#province").append(tmp)
    }
    $("#province").change(function(ev){
        
    	addresswarn=true;
    	$("#city").html("");
    	var cityArray=data[$(this).val()];
    	for (var j in cityArray){
        
    		var tmp=document.createElement("option");
    		$(tmp).text(cityArray[j]);
    		$("#city").append(tmp);
    	}
    })
    
    /*密码界面*/
    var password1warn=false;
    passwordpattern=/^[a-zA-Z0-9]{6,12}$/;  /*password的正则模板*/ 
    $("#password").focus(function (ev){
        
    	$("#password").attr("type","password");
    	if ($(this).val() == "请输入你的密码"){
        
    		$(this).val("");
    	}
    })
    $("#password").blur(function (ev){
           /*输入框失去焦点*/
    	if ($(this).val() == ""){
        
    		$("#password").attr("type","text");
    		$(this).val("请输入你的密码");
    	}
    })
    $("#password").on("input",function(ev){
            /*校验*/
    	if (!passwordpattern.test($(this).val())){
        $("#passwordwarn").html("密码输入错误");};
    	if (passwordpattern.test($(this).val())){
        $("#passwordwarn").html("");password1warn=true;};
    })
    
    /*确认密码界面*/
    var password2warn=false;
    $("#password2").focus(function (ev){
        
    	$("#password2").attr("type","password");
    	if ($(this).val() == "请确认你的密码"){
        
    		$(this).val("");
    	}
    })
    $("#password2").blur(function (ev){
           /*输入框失去焦点*/
    	if ($(this).val() == ""){
        
    		$("#password2").attr("type","text");
    		$(this).val("请确认你的密码");
    	}
    })
    $("#password2").on("input",function(ev){
            /*校验*/
    	if ($(this).val()!=$("#password").val()){
        $("#password2warn").html("两次输入的密码不匹配");};
    	if ($(this).val()==$("#password").val()){
        $("#password2warn").html("");password2warn=true;};
    })
    
    /*清除重置按钮*/
    var resetEle=document.getElementById("reset");   //清除重置按钮
    $("#reset").click(function(ev){
        
    	$("#password").attr("type","text");
    	$("#password2").attr("type","text");
    	for (var n=0;n<$(".warn").length;n++){
           //清除警告
    		$($(".warn")[n]).html("");
    	}
    })
    
    /*注册按钮*/
    $("#submit").click(function(ev){
        
    	/*对地址进行判断*/
    	if (!addresswarn){
          
    		$("#addresswarn").html("请选择地址");
    	}
    	if (addresswarn) {
        
    		$("#addresswarn").html("");
    	}
    	/*对性别进行判断*/
    	if (!genderwarn){
        
    		$("#genderwarn").html("请选择性别");
    	}
    	if (genderwarn){
        
    		$("#genderwarn").html("");
    	}
    	/*对所有的输入进行判断*/
    	if (namewarn&&genderwarn&&emailwarn&&phonewarn&&addresswarn&&password1warn&&password2warn){
        
    		$("#submit").attr("type","submit");
    	}
    })

本人初学者，部分方法使用不佳，还希望多多指教。  
END！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc5MTk0Mg_size_16_color_FFFFFF_t_70]: /images/20221124/9b050be729164431948a6ba8621ffd2b.png