会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132359个问题
JAVA 全系列/第四阶段:网页编程和设计/JavaScript语言 451楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 452楼
JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 453楼
JAVA 全系列/第四阶段:网页编程和设计/Jquery(旧) 454楼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<script>
		//将得到的验证码定义在方法外面,因为校验时要用
		var ran;
			/*验证码*/
			function yzm(){
				//随机生成四位数
				//Math.floor(x)返回小于参数x的最大整数,即对浮点数向下取整
				 ran=Math.floor(Math.random()*9000+1000);
				//获得span对象
				var span = document.getElementById("yzm_span");
				span.innerText=ran;
			}
			/*校检用户名*/
			/*function checkName(){
				//获得用户名的值
				var uname=document.getElementById("uname").value;
				//获得span对象
				var span = document.getElementById("uname_span");
				//正则表达式    只能输入汉字
				var reg = /^[\u4e00-\u9fa5]{3,5}$/;
				if(uname==null || uname==""){
					span.innerText="X用户名不能为空";
					//加样式
					span.style.color="red";
				}else if(reg.test(uname)){
					span.innerText="√用户名含法";
					span.style.color="green";
				}else{
					span.innerText="×用户名不合法";
					span.style.color="red";
				}
			}
			*/
			/*校检密码*/
			/*function checkPwd(){
				//获得密码的值
				var pwd=document.getElementById("pwd").value;
				//获得span对象
				var span = document.getElementById("pwd_span");
				//正则表达式    只能输入汉字
				var reg = /^\d{4,6}$/;
				if(pwd==null || pwd==""){
					span.innerText="X密码不能为空";
					//加样式
					span.style.color="red";
				}else if(reg.test(pwd)){
					span.innerText="√密码含法";
					span.style.color="green";
				}else{
					span.innerText="×密码不合法";
					span.style.color="red";
				}
			}*/
			/*校检用户名*/
			function checkName(){
				var reg = /^[\u4e00-\u9fa5]{3,5}$/;
				//调用check方法
				return check("uname",reg);
			}
			/*校检密码*/
			function checkPwd(){
				//正则表达式    只能输入汉字
				var reg = /^\d{4,6}$/;
				return check("pwd",reg);
			}
			/*手机号*/
			function checkTel(){
				var reg = /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/;
				return check("phone",reg);
			}
			
			/*邮箱*/
			function checkEmail(){
				var reg =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				return check("ema",reg);
			}
			
			/*提取公共的方法*/
			
			
			function check(id,reg){
				//获得用户名的值
				var uname=document.getElementById(id);
				var val=uname.value; 
				//获得alt属性
				var alt = uname.alt;
				//获得span对象
				var span = document.getElementById(id+"_span");
				
				if(val==null || val==""){
					span.innerText="X"+alt+"不能为空";
					//加样式
					span.style.color="red";
					return false;
				}else if(reg.test(val)){
					span.innerText="√"+alt+"含法";
					span.style.color="green";
					return true;
				}else{
					span.innerText="×"+alt+"不合法";
					span.style.color="red";
					return false;
				}
			}
			
			/*性别检验*/
			function checkSex(){
				//获得性别的对象
				var sex = document.getElementsByName("sex");
				var span = document.getElementById("sex_span");
				//用循环,有两个
				for(var i in sex){
					if(sex[i].checked){
						span.innerHTML="性别选择成功";
						span.style.color="green";
						return true;
					}
				}
				//上面的是选择,下面的是没有选择
				span.innerHTML="请选择性别";
				span.style.color="red";
				return false;
				/*return true/return false   因为已经选择了爱好,但是程序到这里并没有终止,从而导致你选择无效*/
			}
			
			/*爱好检验*/
			function checkFavours(){
				//获得性别的对象
				var fav = document.getElementsByName("fav");
				var span = document.getElementById("fav_span");
				//用循环,有两个
				for(var i in fav){
					if(fav[i].checked){
						span.innerHTML="爱好选择成功";
						span.style.color="green";
						return true;
					}
				}
				//上面的是选择,下面的是没有选择
				span.innerHTML="请选择爱好";
				span.style.color="red";
				return false;
			}
			
			/*籍贯检验*/
			function checkAdress(){
				var sel = document.getElementById("sel").value;
				var span = document.getElementById("sel_span");
				if(sel==0){
					span.innerText="请选择";
					span.style.color="red";
					return false;
				}else{
					span.innerText="已选择";
					span.style.color="green";
					return true;
				}
			}
			
			/*验证码*/
			function checkYzm(){
				var yzm = document.getElementById("yzm").value;
				var span = document.getElementById("yzm2_span");
				if(ran==yzm){
					span.innerText="输入正硧";
					span.style.color="green";
					return true;
				}else{
					span.innerText="输入错误";
					span.style.color="red";
					return false;
				}
			}
			
			/*协议与提交*/
			function checkAgree(){
				//协议对象
				var check = document.getElementById("check");
				//提交对象
				var sub = document.getElementById("sub");
				//没有选择submit才灰色
				sub.disabled=!check.checked;
			}
			
			/*总校验*/
			function all(){
				var flag = checkName()&&checkPwd()&&checkTel()&&checkEmail()checkFavours()&&checkAdress()&&checkYzm()&&checkAgree()&&checkSex();
				return flag;
			}
			/*正则表达式 :是对于数据格式进行一定的规范限制
			 
			 * ^  :   开始
			 * [0-9] [a-z A-Z]  数字与字母
			 * {2,4}  :段域    至小是2位	最多是4位
			 * {3}   :   指定范围就是3位
			 * $  : 结束
			 * \d : [0-9]
			 * \w  : [0-9 a-z A-Z]
			 * */
			
		</script>
		<style type="text/css">
			h2{
				width: 100%;
				text-align: center;
				
			}
			form{
				margin-left: 500px;
			}
			.left{
				padding-right: 30px;
				text-align: right;
			}
		</style>
	</head>
	<body onload="yzm()">
		<h2 >注册页面</h2>
		<hr />
		
			<form action="#" method="get" onsubmit="return all()">
				<table width="500px">
					<tr>
						<td class="left">用户名:</td>
						<td>
							<!--失去焦点时调用    onblur=""-->
							<input type="text" name="uname" id="uname" placeholder="请输入" alt="用户名" onblur="checkName()"/>
							<span id="uname_span">用户名必须是3至5位汉字</span>
						</td>
					</tr>
					<tr>
						<td class="left">密码:</td>
						<td>
							<input type="password" name="pwd" id="pwd" alt="密码" onblur="checkPwd()"/>
							<span id="pwd_span"></span>
						</td>
					</tr>
					<tr>
						<td class="left">手机号:</td>
						<td>
							<input type="tel" name="phone" id="phone" alt="手机号" onblur="checkTel()"/>
							<span id="phone_span"></span>
						</td>
					</tr>
					<tr>
						<td class="left"> 邮箱:</td>
						<td>
							<input type="email" name="" id="ema" value="" alt="邮箱" onblur="checkEmail()"/>
							<span id="ema_span"></span>
						</td>
					</tr>
					<tr>
						<td class="left">性别:</td>
						<td>
							男:<input type="radio" name="sex" value="man" onclick="checkSex()"/>
							女:<input type="radio" name="sex" value="wonam" onclick="checkSex()"/>
							<span id="sex_span">
							
							</span>
						</td>
					</tr>
					<tr>
						<td class="left">爱好:</td>
						<td>
							<input type="checkbox" name="fav" id="song" value="唱歌" onclick="checkFavours()"/>
							<label for="song">唱歌</label>
							<input type="checkbox" name="fav" id="sleep" value="sleep" onclick="checkFavours()"/>
							<label for="sleep">睡觉</label>
							<input type="checkbox" name="fav" id="lol" value="lol" onclick="checkFavours()"/>
							<label for="lol">LOL</label><br />
							<input type="checkbox" name="fav" id="visit" value="旅游" onclick="checkFavours()"/>
							<label for="visit">旅游</label>
							<input type="checkbox" name="fav" id="gef" value="高尔夫" onclick="checkFavours()"/>
							<label for="gef">高尔夫</label>
							<input type="checkbox" name="fav" id="basketball" value="basketball" onclick="checkFavours()"/>
							<label for="basketball">篮球</label>
							<span id="fav_span">
								
							</span>
						</td>
					</tr>
					<tr>
						<td class="left">籍贯:</td>
						<td>
							<select name="籍贯" id="sel" onchange="checkAdress()">
								<option value="0">请选择</option>
								<option value="1">广东</option>
								<option value="2">上海</option>
								<option value="3">北京</option>
								
							</select>
							<span id="sel_span">
									
								</span>
						</td>
					</tr>
					<tr>
						<td class="left">验证码:</td>
						<td>
							<input type="number" name="" id="yzm" value="" onblur="checkYzm()"/>
							<span id="yzm_span"></span>
							<span id="yzm2_span"></span>
						</td>
					</tr>
					<tr>
						<td class="left">个人介绍:</td>
						<td>
							<textarea name="自我介绍" rows="10" cols="20"></textarea>
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<input type="checkbox" name="协议" id="check" onblur="checkAgree()"/>
							是否同意本公司协议
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<!--disabled="true"  按钮不能用-->
							<input type="submit" id="sub" value="注册" disabled="true"/>
						</td>
					</tr>
				</table>
				
			</form>
		
	</body>
</html>

老师,最后的总校验(all())  运行不了,查不到原因,麻烦老师帮我看看哪里出错了

JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 456楼
JAVA 全系列/第四阶段:网页编程和设计/Jquery(旧) 458楼

老师帮看一下 我的按钮   “是”跳转图片不成功

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

  

  <style>

   

   body{

    

    background-image: url(img/bjsky.jpg);

    

    background-repeat:no-repeat ;

    

    background-size: 1600px 800px;

     

   }

   a{

    

    font-size: 25px;

    

    color: #ffffff;

    

   }

   .div1{

    

    width: 300px;

    

    height: 200px;

    

    background-color: gray;

    

    text-align: center;

    

   }

   input{

    

    width: 40px;

    

    height: 30px;

    

   }

   

  </style>

  <script>

  

  var i=-1;

   function changebc(){

    

    var arr=['bjsky.jpg','mayun.jpg','simple.jpg','sxt.jpg','zgc.jpg'];

    

    

    if(i<arr.length-1){

     

     i++;

    }else{

     i=0;

     

    }

    

    document.body.style.backgroundImage="url(img/"+arr[i]+")"

    

   }

   function chengove(){

    //获得div对象

    

    var div = document.getElementById("div_1");

    

    div.style.marginTop=Math.random()*500+"px";

    

    div.style.marginLeft=Math.random()*800+"px";

    

    

    

   }

   function changeclk(){

    

    document.body.style.backgroundImage="url(img/1.jpg)";

    

    //设置当前div隐藏

    document.getElementById("div_1").style.display="none";

    

   }

   

   

  </script>

  

 </head>

 <body>

  

  < a href="javascript:changebc()">点击更换主题</ a>

  

  <div class="div1" id="div_1">

   

   <h3>我是不是你的小可爱</h3>

   

   <input type="button" value="是" onclick="changeclk" />

   

   <input type="button" value="否"   onmouseover="chengove()"/>

   

  </div>

  

  

 </body>

</html>


JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 459楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 460楼
JAVA 全系列/第四阶段:网页编程和设计/JavaScript语言 464楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 465楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637