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

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

第一次学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" align="center">
				<button >个人用户注册</button> <button value="day0109.html"&g
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值