提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

HTML-JavaScript-登录网页及验证

JavaScript网页HTML 登录 验证
2023-09-27 14:27:30 时间 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/reg.js"> </script>
</HEAD>
<BODY>

<form  οnsubmit="return check()" action="">
<table width="768" border="0" cellpadding="0" cellspacing="0" align="center">
 

 
  <tr>
    <td width="778" height="67" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
     
      <tr>
        <td width="108" height="27" valign="top"><img src="imgs/strong.jpg" width="86" height="28"></td>
        <td width="660" valign="middle" bgcolor="#d9f0f0"><strong>用户注册</strong></td>
      </tr>
      <tr>
	
        <td height="36" colspan="2" align="right" valign="middle"><img src="imgs/i1.gif" width="17" height="17">填写用户信息</td>
        </tr>
    </table>    </td>
  </tr>
  <tr>
    <td height="320" valign="top">
	
	<table width="100%" border="0" cellpadding="0" cellspacing="0">
     
      
      
      <tr>
        <td width="96" height="40" align="left" valign="middle">
		     <strong>用户名：</strong>	   </td>
       <td width="152" align="left" valign="middle">
          <input type="text" name="username" >      </td>
	  
        <td width="323" align="left" valign="middle">
			</td>
        <td width="197" align="left" valign="middle">
		<font size="2" color="#666666">不超过7个汉字，或14个字节(数字，字母和下划线)</font></span></td>
      </tr>
     
	  <tr>
        <td height="40" align="left" valign="middle"><strong>密码：</strong></td>
        <td height="40" align="left" valign="middle"><label>
          <input type="password" name="password1" >
        </label></td>
        <td height="40" align="left" valign="middle"> </td>
        <td height="40" align="left" valign="middle"><font size="2" color="#666666" >最少6个字符,不超过14个字符(数字，字母和下划线)</font></span></td>
      </tr>
      <tr>
        <td height="40" align="left" valign="middle"><strong>确认密码：</strong></td>
        <td height="40" align="left" valign="middle"><label>
          <input type="password" name="password2">
        </label></td>
        <td height="40" align="left" valign="middle"> </td>
        <td height="40" align="left" valign="middle"> </td>
      </tr>
      <tr>
        <td height="40" align="left" valign="middle"><strong>性别：</strong></td>
        <td height="40" align="left" valign="middle"><label>
         
		  <input type="radio" name="rdo_sex" value="男"> 男
          <input type="radio" name="rdo_sex" value="女">
          女
        
		
		  </label></td>
        <td height="40" align="left" valign="middle"> </td>
        <td height="40" align="left" valign="middle"> </td>
      </tr>
      <tr>
        <td height="40" align="left" valign="middle"><strong>个人爱好：</strong></td>
        <td height="40" colspan="2" align="left" valign="middle"><label>
		
          <input type="checkbox" name="chk_hobby" value="文学">文学         
          <input type="checkbox" name="chk_hobby" value="影视">影视
          <input type="checkbox" name="chk_hobby" value="音乐">音乐
          <input type="checkbox" name="chk_hobby" value="体育">体育
         
		  </label></td>
        <td height="40" align="left" valign="middle"> </td>
      </tr>
      
	  
	  <tr>
        <td height="40" align="left" valign="middle"><strong>所在城市：</strong></td>
        <td height="40" colspan="2" align="left" valign="middle"><label>
         
          省份
          <select name="province" οnchange="checkCity()" >
		  		<option> 浙江</option>
				<option> 山东</option>
				<option> 江苏</option>
          </select>
          城市
          <select name="city" >
			<option>绍兴市 </option>
			<option> 嘉兴市</option>
          </select>
        </label></td>
        <td height="40" align="left" valign="middle"> </td>
      </tr>
	  
      <tr>
        <td height="40" align="left" valign="middle"><strong>家庭住址：</strong></td>
        <td height="40" colspan="2" align="left" valign="middle"><label>
          <input name="txt_address" type="text" size="30">
        </label></td>
        <td height="40" align="left" valign="middle"><font color="#666666" size="2">请输入详细的家庭住址，接收活动邮件</font></td>
      </tr>
      <tr>
        <td height="40" align="left" valign="middle"><strong>电子邮件：</strong></td>
        <td height="40" align="left" valign="middle"><label>
          <input type="text" name="txt_email">
        </label></td>
        <td height="40" align="left" valign="middle"> </td>
        <td height="40" align="left" valign="middle"><font color="#666666" size="2">请输入有效的邮件地址，当密码遗失时凭此领取</font></td>
      </tr>
	  <tr>
        <td height="40" align="left" valign="middle"><strong>验证码：</strong></td>
        <td height="40" align="left" valign="middle"><label>
          <input type="text" name="checkCode">  
		  
        </label></td>
        <td height="40" align="left" valign="middle">
			<div id="codeNum"></div>		</td>
        <td height="40" align="left" valign="middle"> </td>
      </tr>
    </table>	</td>
  </tr>
  <tr>
    <td height="287" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    
      
      <tr>
        <td width="778" height="29" valign="middle"><label></label></td>
        </tr>
      <tr>
        <td height="35" valign="middle">
        <input type="submit" id="bu" name="Submit" value=" 提 交 "  >
        <label>
              
          <input type="reset" name="Submit2" value=" 重 置 ">
          </label></td>
      </tr>
	  <tr>
        <td height="35" valign="middle">
		是否同意条款内容		  
		  <input type="radio" name="radioItem" value="radiobutton">
		  我同意
		  <input type="radio" name="radioItem" value="radiobutton">
		  我不同意</td>
      </tr>
      <tr>
        <td height="130" valign="top"><label>
		
          <textarea name="textarea" cols="100" rows="8">山东师创软件工程有限公司始创于1994年，是一家综合性信息产业公司，不仅拥有自主知识产权和软件研发能力，更专注于IT人才职业教育，拥有教育培训、软件开发以及国际人才服务等多种业务。被认定为“山东省软件企业”、“山东省高新技术企业”，被授予“齐鲁软件园软件人才培养基地”、“齐鲁软件园对日软件人才培养基地”、“山东省重点服务外包人才培训机构”等称号。 


山东师创致力于高端IT人才培养工作，坚持“诚信教育”的经营理念，依托齐鲁软件园强大的产业优势，以“软件实训”模式进行软件人才集训，为有志于软件开发事业的人士提供更好的职业发展机会，为软件企业提供量身定制的专业化、适用型人才，为合作院校提供全方位的教学服务支持。 

未来，山东师创将充分发挥自身深厚的的行业背景，继续奉行“专注、专业、创新、共赢”的方针，不断提升自身的技术优势、行业经验和服务意识，积极延伸自身价值，发展新事业，服务新客户。山东师创将继续致力于提高公司的IT专业服务和软件人才培养的品质，为山东乃至全国软件产业的发展做出更多贡献！
</textarea>
          </label></td>
        </tr>
      <tr>
        <td height="58" valign="top"><div id="copyLayer">
          <div align="center" ><font size="2" color="7777cc">&copy;2011 师创社团</font></div>
          </div></td>
        </tr>
    </table></td>
  </tr>
</table>
</form>
</BODY>
</HTML>



JavaScript

function checkUsername(){//检查用户名是否合乎规范
	var strname = document.forms[0].username.value;
	if(strname.length==0){
		alert("用户名不能为空");
		return false;
	}
	else if(strname.length>14||strname.length<7){
		alert("用户名长度过长或过短");
		return false;
	}
	//正则表达式
	var reg = /^[a-zA-Z]{1}[a-zA-Z0-9_]{6,13}$/;
	if(reg.test(strname)==false){
		alert("数字，字母和下划线");
		return false;
	}
	return true;
}

function checkPassword(){//检查密码是否合乎规范
	var pword = document.forms[0].password1.value;
	if(pword.length==0){
		alert("密码不能为空");
		return false;
	}
	else if(pword.length>14||pword.length<7){
		alert("您输入的用户名太短或太长。");
		return false;
	}
	//正则表达式
	var reg = /^[a-zA-Z0-9_]{7,14}$/;
	if(reg.test(pword)==false){
		alert("数字，字母和下划线，您输入的用户名不规范。");
		return false;
	}
	return true;
}


function equalPassword(){//密码匹配
	var p1 = document.forms[0].password1.value;
	var p2 = document.forms[0].password2.value;
	if(p1!=p2){
		alert("两次密码输入不一致");
		return false;
	}
	else
	return true;
}


function checkSex(){//选择性别
	 if(document.forms[0].rdo_sex[0].checked==false&&document.forms[0].rdo_sex[1].checked==false){
		 alert("性别不能为空");
		 return false;
	 }
	 return true;
}



function checkHobby(){//选择兴趣
	for(var i=0;i<4;i++){
		if(document.forms[0].chk_hobby[i].checked)
			return true;
	}
	alert("请至少选择一项兴趣爱好");
	return false;
}

function checkEmail(){
	var stremail=document.forms[0].txt_email.value;
	var indexAT=stremail.indexOf("@");
	/*
	email.substring(1,4);
    email.substr(startindex,length);
	email.lastIndexOf(".");	
	*/
	var indexpoint=stremail.indexOf(".");
	if(indexAT>indexpoint)
	{
		alert("您输入的邮件地址有误，请重新输入。");
		return false;
		}
	else 
	    return true;
 }
	
	
	function checkCity()
	{
		var cities=[["绍兴市","嘉兴市"],["潍坊市","烟台市","菏泽市","青岛市"],["无锡市","常州市","连云港"]];
		var province=document.forms[0].province;
		var city=document.forms[0].city;
		var index=province.selectedIndex;
		//清空
		while(city.length>0)
		{
			city.options[0]=null;
			}
		for(var i=0;i<cities[index].length;i++)
		{
			city.options[i]=new Option(cities[index][i],cities[index][i]);
			}
		return true;
		}


<!------------------------------------------------------------------------------------------------------------->
function check(){
	if(checkUsername()&&equalPassword()&&checkPassword()&&checkSex()&&checkHobby()&&checkEmail()&&checkCity()){
		alert("信息内容合乎规范，登录成功");
		return true;
	}
	return false;
}

相关文章