java前端技术---javaScript使用详解(应用篇)
2017-09-01 16:55
323 查看
一.前言
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" onsubmit="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" onsubmit="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 onclick="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 onclick="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 onclick="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">
<!--
.STY
4000
LE1 {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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- java前端技术---javaScript使用详解(基础篇)
- JAVA 开发平台的技术和框架（一）Web前端
- Java前端技术学习
- 程序员进阶路上不能错过的史上最全技术知识图谱秘籍 #精选大数据前端开发JAVA 今天在技术大海中游啊游游啊游，哇啊哈哈 ^_^发现了一份非常有用的超级技术图谱诶！
- Java - 你用过的网站前端优化的技术有哪些？
- 六,JavaWeb简略的谈下前端技术<三>JavaScript
- 五,JavaWeb简略的谈下前端技术<二>CSS层叠样式表
- 京东商城技术架构：前端.NET后端Java
- java后台返回前端数据的方式json,html 组装json的技术struts2-json-plugin,fast-json,Gson,手动拼接
- 四，JavaWeb简略的谈下前端技术<一>HTML5的各个标记
- 从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析
- JAVA 开发平台的技术和框架（二）前端控制器：Struts2 ,Spring MVC
- 京东商城技术架构：前端.NET后端Java
- 京东商城技术架构：前端.NET后端Java
- [Web前端技术教学]CSS中可继承的属性以及无继承性的属性
- java动态缓存技术（转）
- 《Java程序代理器》- java桌面程序运行的前端启动框架
- Java中的一些常遇到的技术区别
- 漫谈Java数据库存取技术
- Java Web前端之简介一二