java前端技术---javaScript使用详解(应用篇)

最新推荐文章于 2024-04-22 01:54:28 发布

good well

最新推荐文章于 2024-04-22 01:54:28 发布

阅读量565

点赞数

分类专栏：前端web 文章标签： javascript

本文链接：https://blog.csdn.net/qq_33223299/article/details/77775048

版权

前端web 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一.前言

javaScript是前端开发的重要语言,上一篇整理了些比较基础的基础知识,那么下面写一些在前端开发可能会用到的js技术

二.js表单输入验证

表单数据经常需要使用 JavaScript 来验证其正确性：

验证表单数据是否为空？

<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;//获取表单里的值
if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" οnsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
	
</body>

验证输入是否是一个正确的email地址？

<head>
<script>
function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if(!myreg.test(x))
	   {
	       alert('提示\n\n请输入有效的E_mail！');
	       myreg.focus();
	       return false;
	    }
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" οnsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
	
</body>

验证日期是否输入正确？

<script language="javascript">
function clockon(bgclock){
	var now=new Date();
	var year=now.getYear();
	var month=now.getMonth();
	var date=now.getDate();
	var day=now.getDay();
	var hour=now.getHours();
	var minu=now.getMinutes();
	var sec=now.getSeconds();
	var week;
	month=month+1;
	if(month<10) month="0"+month;
	if(date<10) date="0"+date;
	if(hour<10) hour="0"+hour;
	if(minu<10) minu="0"+minu;
	if(sec<10) sec="0"+sec;
	var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
	week=arr_week[day];
	var time="";
	time=year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minu+":"+sec;
	if(document.all){
		bgclock.innerHTML="["+time+"]"
	}
	var timer=setTimeout("clockon(bgclock)",200);
} 
</script>
<script language="javascript">
//判断输入的日期是否正确
function CheckDate(INDate){ 
if (INDate==""){return true;}
if(INDate.indexOf('-',0)!=-1){separate="-"}
else{
	if(INDate.indexOf('/',0)!=-1){separate="/"}
	else {return true;}
	}
	area=INDate.indexOf(separate,0)
	//获取年份
	subYY=INDate.substr(0,area)
	if(isNaN(subYY) || subYY<=0){
		return true;
	}		
	//转换月份
	subMM=INDate.substr(area+1,INDate.indexOf(separate,area+1)-(area+1))
	if(isNaN(subMM) || subMM<=0){
		return true;
	}
	if(subMM.length<2){subMM="0"+subMM}
	//转换日
	area=INDate.lastIndexOf(separate)
	subDD=INDate.substr(area+1,INDate.length-area-1)
	if(isNaN(subDD) || subDD<=0){
		return true;
	}
	if(eval(subDD)<10){subDD="0"+eval(subDD)}
	NewDate=subYY+"-"+subMM+"-"+subDD
	if(NewDate.length!=10){return true;}
    if(NewDate.substr(4,1)!="-"){return true;}
    if(NewDate.substr(7,1)!="-"){return true;}
	var MM=NewDate.substr(5,2);
	var DD=NewDate.substr(8,2);
	if((subYY%4==0 && subYY%100!=0)||subYY%400==0){ //判断是否为闰年
		if(parseInt(MM)==2){
			if(DD>29){return true;}
		}
	}else{
		if(parseInt(MM)==2){
			if(DD>28){return true;}
		}	
	}
	var mm=new Array(1,3,5,7,8,10,12); //判断每月中的最大天数
	for(i=0;i< mm.length;i++){
		if (parseInt(MM) == mm[i]){
			if(parseInt(DD)>31){
				return true;
			}else{
				return false;
			}
		}
	}
   if(parseInt(DD)>30){return true;}
   if(parseInt(MM)>12){return true;}
   return false;
   }
</script>
<script language="javascript">
function check(myform){
	if(myform.sDate.value==""){
		alert("请输入开始日期");myform.sDate.focus();return;
	}		
	if(CheckDate(myform.sDate.value)){
		alert("您输入的开始日期不正确！\n 请注意日期格式（如：2007/07/17或2007-07-17）或闰年！");myform.sDate.focus();return;
	}
	if(myform.eDate.value==""){
		alert("请输入结止日期");myform.eDate.focus();return;
	}		
	if(CheckDate(myform.eDate.value)){
		alert("您输入的结止日期不正确！\n 请注意日期格式（如：2007/07/17或2007-07-17）或闰年！");myform.eDate.focus();return;
	}
	myform.submit();
}
</script>
</head>
<body onLoad="clockon(bgclock)">
	<form action="" method="post" name="form1">  
 <table width="98%" height="38"  border="0" cellpadding="0" cellspacing="0" bgcolor="#E3F4F7" class="tableBorder_gray">
  <tr>
    <td align="center"><div id="bgclock"></div>
</td>
    <td>从<input name="sDate" type="text" id="sDate">
 到  <input name="eDate" type="text" id="eDate">
 
<input name="Button" type="button" class="btn_grey" value="查询" onClick="check(form1)"></td>
  </tr>
</table>
</form>

验证表单输入内容是否为数字型？

<p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" required>
<button οnclick="myFunction()">验证</button>

<p>如果输入的数字小于 100 ( input 的 min 属性), 会显示错误信息。</p>

<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
	var inpObj = document.getElementById("id1");
	if(!isNumeric(inpObj.value)) {
		txt = "你输入的不是数字";
	} else if (inpObj.validity.rangeUnderflow) {
        txt = "输入的值太小了";
    } else {
        txt = "输入正确";
    }
    document.getElementById("demo").innerHTML = txt;
}

// 判断输入是否为数字
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
	</script>

</body>

三.js弹窗

警告框

window.alert("sometext");

window.alert() 方法可以不带上window对象，直接使用alert()方法

确认框

<p>点击按钮，显示确认框。</p>
<button οnclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var r=confirm("按下按钮!");
	if (r==true){
		x="你按下了\"确定\"按钮!";
	}
	else{
		x="你按下了\"取消\"按钮!";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>

提示框

<p id="demo"></p>
<button οnclick="myFunction()">点击</button>
<script>

function myFunction(){
	var person=prompt("请输入您的名字", "张三");
	if (person!=null&&person!="") {
		x="欢迎"+person+"登录";
	}else {
		x="您没输入名字";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

四.计时跳转

<script language="JavaScript"> 
var times=6; 
clock(); 
function clock() 
{ 
   window.setTimeout('clock()',1000); 
   times=times-1; 
   time.innerHTML =times; 
} 
</script>
<head>
<meta http-equiv= "Refresh" content= "5;url=index.jsp ">
<title>Insert title here</title>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
</head>
<body>

用户名密码错误，请重新输入。 
<table> 
<tr> 
<td class= "FontBlack STYLE1"> 　　该页面将在 </td> 
<td class= "FontBlack"> <div class="STYLE1" id= "time"> 5 </div> </td> 
<td class= "FontBlack STYLE1"> 秒后自动跳转 </td> 
</tr> 
</table> 
</body>

good well

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
java前端技术---javaScript使用详解(应用篇)

一.前言javaScript是前端开发的重要语言,上一篇整理了些比较基础的基础知识,那么下面写一些在前端开发可能会用到的js技术二.js表单输入验证表单数据经常需要使用 JavaScript 来验证其正确性：验证表单数据是否为空？function validateForm(){var x=document.forms["myForm"]["fname"
复制链接

扫一扫

专栏目录