第三十天：Hbuilder+js，注册界面的前端验证

最新推荐文章于 2024-10-17 23:11:19 发布

原创

最新推荐文章于 2024-10-17 23:11:19 发布 · 6.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #注册表单 js函数

本文记录了作者初次学习JavaScript，并在一早上完成个人和企业注册界面的前端验证。通过JS代码实现输入格式检查，正确时显示对号，错误时显示错号。

第一次学js,一早上时间就写了一个这东西，个人注册和企业级注册的页面。

1.符合格式则输出的为对号，错误的侧输出的是错号；

具体的要求格式看js代码

<!DOCTYPE html>
<html>
	<!--
    	作者：57403859@qq.com
    	时间：2017-06-06
    	描述：
    -->
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.a{
				background-color: red;
			}
			.b{
				background-color: lightseagreen;
			}
			.c{
				width: 100%;
				height: 100%;
				background-color: skyblue;
			}			
			
		</style>
		<script type="text/javascript">
				function checkname(){
					var name=document.getElementById("name");
					var mes= document.getElementById("mes");
					if(name.value.length==0||name.value.length>9){
						mes.className="a";	
						mes.innerHTML="×";
					}else{
						mes.innerHTML="√";
						mes.className="b";
					}
				}
			
				
				function checkidnum(){
					var idnum =document.getElementById("idnum");
					var mes2  =document.getElementById("mes2");
					var reg=/\d{17}\w{1}/;
					if(reg.test(idnum.value)){
							mes2.innerHTML="√";
							mes2.className='b';
					}else{
						mes2.innerHTML="×";
						mes2.className="a";
					}
				}
			    
			    function checkusername(){
					var username =document.getElementById("username");
					var mes3  =document.getElementById("mes3");
					var reg=/\W{1,8}/;
					if(reg.test(username.value)){
							mes3.innerHTML="√";
							mes3.className='b';
					}else{
						mes3.innerHTML="×";
						mes3.className="a";
					}
				}
			
				function checkpwd(){
					var pwd =document.getElementById("pwd");
					var mes4  =document.getElementById("mes4");
					var reg=/\w{6,}/;
					if(reg.test(pwd.value)){
							mes4.innerHTML="√";
							mes4.className='b';
					}else{
						mes4.innerHTML="×";
						mes4.className="a";
					}
				}
				
				function checkrepwd(){
					var username =document.getElementById("repwd");
					var mes5  =document.getElementById("mes5");
					var reg=/\w{6,}/;
					if(reg.test(repwd.value)){
							mes5.innerHTML="√";
							mes5.className='b';
					}else{
						mes5.innerHTML="×";
						mes5.className="a";
					}
				}
								
				function checkemail(){
					var email =document.getElementById("email");
					var mes6  =document.getElementById("mes6");
					var reg=/\w+\@{1}\w+\.{1}\w+/;
					if(reg.test(email.value)){
							mes6.innerHTML="√";
							mes6.className='b';
					}else{
						mes6.innerHTML="×";
						mes6.className="a";
					}
				}

			
		</script>
	</head>
		<div class="c