JavaScript实现图片自动轮播

最新推荐文章于 2024-01-04 11:44:36 发布

Rrenr

最新推荐文章于 2024-01-04 11:44:36 发布

阅读量9k

点赞数 13

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/weixin_45746811/article/details/127697906

版权

3.3.1从外部引入js文件（一些匹配函数）

JS：是一种脚本语言，由浏览器来解释执行，不需要进行编译。

JS声明变量：var 变量名

JS声明函数：function 函数名（参数）{}

JS开发步骤：

确定事件
事件要触发函数，所以要声明函数。
函数里面通常是要去做一些交互操作，弹框、修改页面内容、动态添加东西。

定时器：

setInterval("test()",3000) 每隔多少毫秒执行一次函数。

setTimeout("test()",3000)多少毫秒之后执行一次函数。

timerID：定时器调用后返回值

clearInterval()

clearTimeout()

切换图片

img.src = "图片路径"

事件：文档加载完成的事件 onload事件

显示广告： img.style.display = "block"

隐藏广告：img.style.display = "none"

表单校验

引入外部js文件

<script src = "js文件路径" type = "text/javascript"/>

表单校验中常用事件:

获得焦点事件 onfocus
失去焦点事件 onblur
按键抬起事件 onkeyup

1.轮播图片

需求：

有一组图片，每隔三秒钟切换一张图。

技术分析：

切换图片

每隔三秒钟做一件事

步骤分析：

确定事件：文档加载完成的事件onload
事件要触发：init（）
函数里面要做一些事情：（通常会去操作元素提供交互）
开启定时器：执行切换图片的函数changeImg（）
changeImg（）获得要切换图片的那个元素

1.1图片切换功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/*   
			1.事件：点击onclick
			2.事件触发函数：changeImg
			3.在函数中
			*/
			function changeImg(){
				var img = document.getElementById("img1");
				img.src = "../img/img2";
				//id传入src
			}
			
		</script>
	</head>
	<body>
		<input type="button" value="点击切换图片" onclick="changeImg()" />
		<br />
		<img src="../img/1.jpg"  id="img1"/>
		<img src="../img/2.jpg"  id="img2" />
		<!-- 定义图片为id -->
	</body>
</html>

1.2定时器功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			alert('123');
			// window.setInterval("alert('123');",2000);
			//window对象是一个最顶层对象，可以省略window
			//每隔两千毫秒,进行引号内的命令
			function test(){
				console.log("setInterval调用了");
			}
			// setInterval("test()",2000);
			//2s执行一次
			// setTimeout("test()",2000);
			//2s后执行一次就不再执行了。	
			var timerID;//是setInterval返回的定时器id
			function startClock(){
				timerID = setInterval("test()",2000);
			}
			function stopClock(){
				clearInterval(timerID);//取消定时器 
			}
			
		</script>
	</head>
	<body>
		<input type="button" value="开启计时器" onclick="startClock()"/>
		<input type="button" value="关闭计时器" onclick="stopClock()"/>
		
	</body>
</html>

1.3图片自动轮播实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 确定事件：文档加载完成的事件onload
		事件要触发：init（）
		函数里面要做一些事情：（通常会去操作元素提供交互）
		开启定时器：执行切换图片的函数changeImg（）
		changeImg（） 获得要切换图片的那个元素 -->
		<script>
			var index = 0;
				 
			function changeImg(){
				var img = document.getElementById("img1");
				//计算当前要切换到第几张图片
				var curIndex = index % 3 + 1;//0,1,2
				// img.src = "../img/2.jpg";//1，2，3
				img.src = "../img/"+curIndex+".jpg";//1，2，3
				//id传入src
				index = index + 1;
			}
			function init(){
				setInterval("changeImg()",1000); 
			}
			// 每隔3s调用一次changeImg()
			
		</script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpg"  id="img1"/>
	</body>
</html>

文件目录：

2.页面定时弹出广告

2.1 需求分析

打开网页时，弹出广告，五秒后消失。

2.2 技术分析

定时器

setinterval 每隔多少毫秒执行一次函数
setTimeout 多少毫秒之后执行一次函数
clearinterval
clearTimeout

显示广告 img.style.display = "block"

隐藏广告 img.style.display = "none"

2.3步骤分析

确定事件：页面加载完成的事件onload
事件要触发函数：init（）
init函数里面做一件事：

启动一个定时器：setTimeout()
显示一个广告，再去开启一个定时器五秒后关闭。

2.4代码实现

1.图片的显示与隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//文档加载顺序，由上到下
			function hideImg(){
				var img=document.getElementById("img1");
				img.style.display = "none";
			}
			function showImg(){
				var img=document.getElementById("img1");
				img.style.display = "";
			}
		</script>
		
	</head>
	<body>
		<input type="button" value="显示" onclick="showImg()"/>
		<input type="button" value="隐藏" onclick="hideImg()"/><br />
	<!-- 	绑定函数 -->
		<img src="../img/3.jpg" id="img1"/>
	</body>
</html>

2.广告自动弹出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<!-- 	确定事件：页面加载完成的事件onload
		事件要触发函数：init（）
		init函数里面做一件事：
		启动一个定时器：setTimeout()
		显示一个广告，再去开启一个定时器五秒后关闭。 -->
	<script>
		function hideAD(){
			var img = document.getElementById("img1");
			img.style.display = "none";
		}
		function showAD(){
			//首先获取要操作的img的id
			var img = document.getElementById("img1");
			//显示
			img.style.display = "block";
			
			//开启定时器，关闭广告
			setTimeout("hideAD()",3000)
		}
		
		function init(){
			setTimeout("showAD()",3000);
		}
	</script>
	</head>
	<body onload="init()">
		<img id ="img1" src="../img/6.jpg"  width="100%" style="display: none;"/>
	</body>
</html>

3.表单校验

3.1需求分析

当用户输入信息有误时候，在输入框后给出友好提示。

3.2技术分析

【HTML中的innerHTML属性】

【JS中常用事件】

onfocus：获得焦点事件
onblur：失去焦点事件
onkeyup：按键抬起事件

3.1用户名检验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			// 1.确定事件:onfocus,
			// 2.事件驱动函数
			// 3.函数要做些事情,修改span内容
			//用户名提示
			function showTips(){
				//获得要操作的元素
				var span = document.getElementById("span_username");
				span.innerHTML = "<font color='red' size='2'>用户名长度不能少于六位</font>";
			}
			/*
			校验用户名：
			1.事件：onblur 失去焦点
			2.函数：checkUsername()
			3.函数显示校验结果
			*/
		   function checkUsername(){
			   //获取用户输入内容
			   var uvalue = document.getElementById("username").value;
			   //对输入内容进行校验
			   //获得要显示结果的span
			   var span = document.getElementById("span_username");
			   if(uvalue.length < 6){
				   span.innerHTML = "<font color='red' size='2'>用户名太短！</font>";
			   }else{ 
				   span.innerHTML = "<font color='green' size='2'>通过</font>";
			   }
			   //显示校验结果
			   
		   }
			
			
		</script>
	</head>
	<body>
		<form action="../01图片自动轮换/图片轮播.html" onsubmit="return checkForm()">
		用户名：<input type="text" id = "username" onfocus="showTips()" onblur="checkUsername()"/><span id="span_username"></span> <br />
		密码：<input type="password" id = "password" /><br />
		确认密码：<input type="password" id = "repassword" /><br />
		邮箱：<input type="text" id = "email" /><br />
		手机号：<input type="text" id = "text" /><br />
		
		<input type="submit" value="提交" />
		</form>
	</body>
</html>

效果：

3.2密码校验

先修改提示函数，令提示内容与id为变量。

//用户名提示
			function showTips(spanID,msg){
				//获得要操作的元素
				var span = document.getElementById(spanID);
				span.innerHTML = msg;
			}

新增密码校验与确认函数

// 密码校验
		   function checkPassword(){
			   //获取密码输入
			   var Upass = document.getElementById("password").value;
			   var span = document.getElementById("span_password");
			   //对密码输入进行判断
			   if(Upass.length < 6){
			   				   span.innerHTML = "<font color='red' size='2'>密码太短不行！</font>";
			   }else{ 
			   				   span.innerHTML = "<font color='green' size='2'>通过</font>";
			   }
		   }
			//确认密码
			function checkRePassword(){
						   //获取密码输入
						   var Upass = document.getElementById("password").value;
						   //获取确认密码输入
						   var URePass = document.getElementById("repassword").value;
						   var span = document.getElementById("span_repassword");
						   //对密码输入进行判断
						   if(Upass != URePass){
						   				   span.innerHTML = "<font color='red' size='2'>对不起！两次密码不一致！</font>";
						   }else{ 
						   				   span.innerHTML = "<font color='green' size='2'>通过！</font>";
						   }
			}

用户名+密码校验总代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			// 1.确定事件:onfocus,
			// 2.事件驱动函数
			// 3.函数要做些事情,修改span内容
			//用户名提示
			function showTips(spanID,msg){
				//获得要操作的元素
				var span = document.getElementById(spanID);
				span.innerHTML = msg;
			}
			/*
			校验用户名：
			1.事件：onblur 失去焦点  onkeyup事件，每个按键都校验一次，连续
			2.函数：checkUsername()
			3.函数显示校验结果
			*/
		   function checkUsername(){
			   //获取用户输入内容
			   var uValue = document.getElementById("username").value;
			   //对输入内容进行校验
			   //获得要显示结果的span
			   var span = document.getElementById("span_username");
			   if(uValue.length < 6){
				   span.innerHTML = "<font color='red' size='2'>用户名太短！</font>";
			   }else{ 
				   span.innerHTML = "<font color='green' size='2'>通过</font>";
			   }
			   //显示校验结果 
		   }
		   // 密码校验
		   function checkPassword(){
			   //获取密码输入
			   var Upass = document.getElementById("password").value;
			   var span = document.getElementById("span_password");
			   //对密码输入进行判断
			   if(Upass.length < 6){
			   				   span.innerHTML = "<font color='red' size='2'>密码太短不行！</font>";
			   }else{ 
			   				   span.innerHTML = "<font color='green' size='2'>通过</font>";
			   }
		   }
			//确认密码
			function checkRePassword(){
						   //获取密码输入
						   var Upass = document.getElementById("password").value;
						   //获取确认密码输入
						   var URePass = document.getElementById("repassword").value;
						   var span = document.getElementById("span_repassword");
						   //对密码输入进行判断
						   if(Upass != URePass){
						   				   span.innerHTML = "<font color='red' size='2'>对不起！两次密码不一致！</font>";
						   }else{ 
						   				   span.innerHTML = "<font color='green' size='2'>通过！</font>";
						   }
			}
			
			
		</script>
	</head>
	<body>
		<form action="../01图片自动轮换/图片轮播.html" onsubmit="return checkForm()">
		用户名：<input type="text" id = "username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span> <br />
		密码：<input type="password" id = "password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()" /><span id="span_password"></span> <br />
		确认密码：<input type="password" id = "repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id = "span_repassword"></span><br />
		邮箱：<input type="text" id = "email" /><br />
		手机号：<input type="text" id = "text" /><br />
		
		<input type="submit" value="提交" />
		</form>
	</body>
</html>

3.3校验邮箱

3.3.1从外部引入js文件（一些匹配函数）

/* 
用途：检查输入的Email信箱格式是否正确 
输入：strEmail：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkEmail(strEmail) 
{      
    var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
    if ( emailReg.test(strEmail) ) {
        return true;
    }
    else {
//      alert("您输入的Email地址格式不正确！");
        return false;
    }
};
 
/*
用途：校验ip地址的格式 
输入：strIP：ip地址 
返回：如果通过验证返回true,否则返回false； 
*/
function isIP(strIP) 
{
    if (isNull(strIP)) {
        return false;
    }
    var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/ //匹配IP地址的正则表达式 
    if (re.test(strIP)) {
        if ( RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256) {
            return true;
        }
    }
    return false;
};
 
/* 
用途：检查输入手机号码是否正确 
输入：strMobile：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkMobile( strMobile )
{	//13588888888
    var regu = /^[1][345678][0-9]{9}$/;
    var re = new RegExp(regu);
    if (re.test(strMobile)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入的电话号码格式是否正确 
输入：strPhone：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkPhone( strPhone ) 
{
    var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;
    var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;
    var prompt = "您输入的电话号码不正确!" 
    if ( strPhone.length > 9 ) {
        if ( phoneRegWithArea.test(strPhone) ) {
            return true;
        }
        else {
            alert( prompt );
            return false;
        }
    }
    else {
        if ( phoneRegNoArea.test( strPhone ) ) {
            return true;
        }
        else {
            alert( prompt );
            return false;
        }
    }
};
 
/* 
用途：检查输入字符串是否为空或者全部都是空格 
输入：str 
返回：如果全是空返回true,否则返回false 
*/
function isNull( str )
{
    if ( str == "" ) {
        return true;
    }
    var regu = "^[ ]+$";
    var re = new RegExp(regu);
    return re.test(str);
};
 
/* 
用途：检查输入对象的值是否符合整数格式 
输入：str 输入的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isInteger( str )
{
    var regu = /^[-]{0,1}[0-9]{1,}$/;
    return regu.test(str);
};
 
/* 
用途：检查输入字符串是否符合正整数格式 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isNumber( s )
{
    var regu = "^[0-9]+$";
    var re = new RegExp(regu);
    if (s.search(re) != - 1) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入字符串是否是带小数的数字格式,可以是负数 
输入：str：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isDecimal( str )
{
    if (isInteger(str)) {
        return true;
    }
    var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;
    if (re.test(str)) {
        if (RegExp.$1 == 0 && RegExp.$2 == 0) {
            return false;
        }
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入对象的值是否符合端口号格式 
输入：str 输入的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isPort( str )
{
    return (isNumber(str) && str < 65536);
};
 
/* 
用途：检查输入字符串是否符合金额格式,格式定义为带小数的正数，小数点后最多三位 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isMoney( s )
{
    var regu = "^[0-9]+[\.][0-9]{0,3}$";
    var re = new RegExp(regu);
    if (re.test(s)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入字符串是否只由英文字母和数字和下划线组成 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isNumberOr_Letter( s )
{
    //判断是否是数字或字母 
    var regu = "^[0-9a-zA-Z\_]+$";
    var re = new RegExp(regu);
    if (re.test(s)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入字符串是否只由英文字母和数字组成 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isNumberOrLetter( s )
{
    //判断是否是数字或字母 
    var regu = "^[0-9a-zA-Z]+$";
    var re = new RegExp(regu);
    if (re.test(s)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入字符串是否只由汉字、字母、数字组成 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isChinaOrNumbOrLett( s )
{
    //判断是否是汉字、字母、数字组成 
    var regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$";
    var re = new RegExp(regu);
    if (re.test(s)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：判断是否是日期 
输入：date：日期；fmt：日期格式 
返回：如果通过验证返回true,否则返回false 
*/
function isDate( date, fmt ) 
{
    if (fmt == null) {
        fmt = "yyyyMMdd";
    }
    var yIndex = fmt.indexOf("yyyy");
    if (yIndex ==- 1) {
        return false;
    }
    var year = date.substring(yIndex, yIndex + 4);
    var mIndex = fmt.indexOf("MM");
    if (mIndex ==- 1) {
        return false;
    }
    var month = date.substring(mIndex, mIndex + 2);
    var dIndex = fmt.indexOf("dd");
    if (dIndex ==- 1) {
        return false;
    }
    var day = date.substring(dIndex, dIndex + 2);
    if (!isNumber(year) || year > "2100" || year < "1900") {
        return false;
    }
    if (!isNumber(month) || month > "12" || month < "01") {
        return false;
    }
    if (day > getMaxDay(year, month) || day < "01") {
        return false;
    }
    return true;
};
function getMaxDay(year, month) 
{
    if (month == 4 || month == 6 || month == 9 || month == 11) {
        return "30";
    }
    if (month == 2) {
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            return "29";
        }
        else {
            return "28";
        }
        return "31";;
    }
};
 
/* 
用途：字符1是否以字符串2结束 
输入：str1：字符串；str2：被包含的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isLastMatch(str1, str2) 
{
    var index = str1.lastIndexOf(str2);
    if (str1.length == index + str2.length) {
        return true;
    }
    return false;
};
 
/* 
用途：字符1是否以字符串2开始 
输入：str1：字符串；str2：被包含的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isFirstMatch(str1, str2) 
{
    var index = str1.indexOf(str2);
    if (index == 0) {
        return true;
    }
    return false;
};
 
/* 
用途：字符1是包含字符串2 
输入：str1：字符串；str2：被包含的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isMatch(str1, str2) 
{
    var index = str1.indexOf(str2);
    if (index ==- 1) {
        return false;
    }
    return true;
};
 
/* 
用途：检查输入的起止日期是否正确，规则为两个日期的格式正确，且结束如期>=起始日期 
输入：startDate：起始日期，字符串; endDate：结束如期，字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkTwoDate( startDate, endDate ) 
{
    if ( !isDate(startDate) ) {
        alert("起始日期不正确!");
        return false;
    }
    else if ( !isDate(endDate) ) {
        alert("终止日期不正确!");
        return false;
    }
    else if ( startDate > endDate ) {
        alert("起始日期不能大于终止日期!");
        return false;
    }
    return true;
};
 
/* 
用途：检查复选框被选中的数目 
输入：checkboxID：字符串 
返回：返回该复选框中被选中的数目 
*/
function checkSelect( checkboxID ) 
{
    var check = 0;
    var i = 0;
    if ( document.all(checkboxID).length > 0 ) 
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ ) {
            if ( document.all(checkboxID).item( i ).checked ) {
                check += 1;
            }
        }
    }
    else {
        if ( document.all(checkboxID).checked ) {
            check = 1;
        }
    }
    return check;
}
function getTotalBytes(varField) 
{
    if (varField == null) {
        return - 1;
    }
    var totalCount = 0;
    for (i = 0; i < varField.value.length; i++) {
        if (varField.value.charCodeAt(i) > 127) {
            totalCount += 2;
        }
        else {
            totalCount++ ;
        }
    }
    return totalCount;
}
function getFirstSelectedValue( checkboxID )
{
    var value = null;
    var i = 0;
    if ( document.all(checkboxID).length > 0 )
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ )
        {
            if ( document.all(checkboxID).item( i ).checked ) {
                value = document.all(checkboxID).item(i).value;
                break;
            }
        }
    }
    else {
        if ( document.all(checkboxID).checked ) {
            value = document.all(checkboxID).value;
        }
    }
    return value;
}
function getFirstSelectedIndex( checkboxID )
{
    var value = - 2;
    var i = 0;
    if ( document.all(checkboxID).length > 0 )
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ ) {
            if ( document.all(checkboxID).item( i ).checked ) {
                value = i;
                break;
            }
        }
    }
    else {
        if ( document.all(checkboxID).checked ) {
            value = - 1;
        }
    }
    return value;
}
function selectAll( checkboxID, status )
{
    if ( document.all(checkboxID) == null) {
        return;
    }
    if ( document.all(checkboxID).length > 0 )
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ ) {
            document.all(checkboxID).item( i ).checked = status;
        }
    }
    else {
        document.all(checkboxID).checked = status;
    }
}
function selectInverse( checkboxID ) 
{
    if ( document.all(checkboxID) == null) {
        return;
    }
    if ( document.all(checkboxID).length > 0 ) 
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ ) 
        {
            document.all(checkboxID).item( i ).checked = !document.all(checkboxID).item( i ).checked;
        }
    }
    else {
        document.all(checkboxID).checked = !document.all(checkboxID).checked;
    }
}
function checkDate( value ) 
{
    if (value == '') {
        return true;
    }
    if (value.length != 8 || !isNumber(value)) {
        return false;
    }
    var year = value.substring(0, 4);
    if (year > "2100" || year < "1900") {
        return false;
    }
    var month = value.substring(4, 6);
    if (month > "12" || month < "01") {
        return false;
    }
    var day = value.substring(6, 8);
    if (day > getMaxDay(year, month) || day < "01") {
        return false;
    }
    return true;
};
 
/* 
用途：检查输入的起止日期是否正确，规则为两个日期的格式正确或都为空且结束日期>=起始日期 
输入：startDate：起始日期，字符串; endDate： 结束日期，字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkPeriod( startDate, endDate ) 
{
    if ( !checkDate(startDate) ) {
        alert("起始日期不正确!");
        return false;
    }
    else if ( !checkDate(endDate) ) {
        alert("终止日期不正确!");
        return false;
    }
    else if ( startDate > endDate ) {
        alert("起始日期不能大于终止日期!");
        return false;
    }
    return true;
};
 
/* 
用途：检查证券代码是否正确 
输入：secCode:证券代码 
返回：如果通过验证返回true,否则返回false 
*/
function checkSecCode( secCode ) 
{
    if ( secCode.length != 6 ) {
        alert("证券代码长度应该为6位");
        return false;
    }
    if (!isNumber( secCode ) ) {
        alert("证券代码只能包含数字");
        return false;
    }
    return true;
};
 
/*
function:cTrim(sInputString,iType) 
description:字符串去空格的函数 
parameters:iType：1=去掉字符串左边的空格;2=去掉字符串左边的空格;0=去掉字符串左边和右边的空格 
return value:去掉空格的字符串 
*/
function cTrim(sInputString, iType) 
{
    var sTmpStr = ' ';
    var i = - 1;
    if (iType == 0 || iType == 1) 
    {
        while (sTmpStr == ' ') {
            ++i;
            sTmpStr = sInputString.substr(i, 1);
        }
        sInputString = sInputString.substring(i);
    }
    if (iType == 0 || iType == 2) 
    {
        sTmpStr = ' ';
        i = sInputString.length;
        while (sTmpStr == ' ') {
            --i;
            sTmpStr = sInputString.substr(i, 1);
        }
        sInputString = sInputString.substring(0, i + 1);
    }
    return sInputString;
};

定义checkMail函数与checkForm整个表单的函数

function checkMail(){
							var umail = document.getElementById("email").value;
							var flag = checkEmail(umail);					
							var span = document.getElementById("span_email");
							//对邮箱输入进行校验
							if(flag){
								span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
								return true;
							}else{
								span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
								return false;
							}
						}
						
			function checkForm(){
				var flag = checkUsername()&&checkPassword()&&  checkRePassword() && checkMail()
				return flag;
			}

每个check函数return true 或者 false

当全部返回为1时，checkForm函数返回flag=1，进行onsubmit事件

总代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
		<!-- 	
			引入外部js文件
			 -->
		</title>
		<script type="text/javascript" src="../js/regutils.js"></script>
		<script>
			// 1.确定事件:onfocus,
			// 2.事件驱动函数
			// 3.函数要做些事情,修改span内容
			//用户名提示
			function showTips(spanID,msg){
				//获得要操作的元素
				var span = document.getElementById(spanID);
				span.innerHTML = msg;
			}
			/*
			校验用户名：
			1.事件：onblur 失去焦点  onkeyup事件，每个按键都校验一次，连续
			2.函数：checkUsername()
			3.函数显示校验结果
			*/
		   function checkUsername(){
			   //获取用户输入内容
			   var uValue = document.getElementById("username").value;
			   //对输入内容进行校验
			   //获得要显示结果的span
			   var span = document.getElementById("span_username");
			   if(uValue.length < 6){
				   span.innerHTML = "<font color='red' size='2'>用户名太短！</font>";
				   return false;
			   }else{ 
				   span.innerHTML = "<font color='green' size='2'>通过</font>";
				   return true;
			   }
			   //显示校验结果 
		   }
		   // 密码校验
		   function checkPassword(){
			   //获取密码输入
			   var Upass = document.getElementById("password").value;
			   var span = document.getElementById("span_password");
			   //对密码输入进行判断
			   if(Upass.length < 6){
			   				   span.innerHTML = "<font color='red' size='2'>密码太短不行！</font>";
							   return false;
			   }else{ 
			   				   span.innerHTML = "<font color='green' size='2'>通过</font>";
							   return true;
			   }
		   }
			//确认密码
			function checkRePassword(){
						   //获取密码输入
						   var Upass = document.getElementById("password").value;
						   //获取确认密码输入
						   var URePass = document.getElementById("repassword").value;
						   var span = document.getElementById("span_repassword");
						   //对密码输入进行判断
						   if(Upass != URePass){
						   				   span.innerHTML = "<font color='red' size='2'>对不起！两次密码不一致！</font>";
										   return false;
						   }else{ 
						   				   span.innerHTML = "<font color='green' size='2'>通过！</font>";
										   return true;
						   }
			}
						/*
						 校验邮箱
						 * */
			function checkMail(){
							var umail = document.getElementById("email").value;
							var flag = checkEmail(umail);					
							var span = document.getElementById("span_email");
							//对邮箱输入进行校验
							if(flag){
								span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
								return true;
							}else{
								span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
								return false;
							}
						}
						
			function checkForm(){
				var flag = checkUsername()&&checkPassword()&&  checkRePassword() && checkMail()
				return flag;
			}
		</script>
	</head>
	<body>
		<form action="../01图片自动轮换/图片轮播.html" onsubmit="return checkForm()">
		用户名：<input type="text" id = "username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span> <br />
		密码：<input type="password" id = "password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()" /><span id="span_password"></span> <br />
		确认密码：<input type="password" id = "repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id = "span_repassword"></span><br />
		邮箱：<input type="text" id = "email" onfocus="showTips('span_email','请输入正确邮箱格式')"  onblur="checkMail()" /> <span id="span_email"></span><br />
		手机号：<input type="text" id = "text" /><br />
		
		<input type="submit" value="提交" />
		</form>
	</body>
</html>