惊天bug!!!在script里面只要有一点点错误,就都不执行了!!!所以每写一个方法,就跑一下,因为这个书写疏忽导致的bug不可估量!!!
【笑哭,所以我才这么讨厌js么,后来真心的是一点都不想再看见js这堆东西了。可能因为先接触的java吧。就觉得javascript万分不好。】
举例:
<script type="text/javascript"> function check(){ if(form.passwor1.value.length<6){ alert("密码不符合规范"); return false; } if(form.name.value==""){ alert("用户名不能为空"); return false; } } </script> </head> <body> <form name="form"action="鼠标事件.html" onsubmit="return check()"> 用户名:<input type="text" name="name"/> 密码:<input type="password" name="password1"/> 确认密码:<input type="password" name="password2"/> <input type="submit" value="提交"/> </form> <script type="text/javascript"> function check(){ if(form.password1.value.length<6){ alert("密码不符合规范"); return false; } if(form.name.value==""){ alert("用户名不能为空"); return false; } } </script> </head> <body> <form name="form"action="鼠标事件.html" onsubmit="return check()"> 用户名:<input type="text" name="name"/> 密码:<input type="password" name="password1"/> 确认密码:<input type="password" name="password2"/> <input type="submit" value="提交"/> </form> 就差一个字母d,就可以让js作废!!!
2015.11.30 js函数 +表单验证
复习:
1、js javascript 客户端脚本语言
他是运行在客户端浏览器的,它不是独立运行的,需要嵌入到html页面中运行。
有数据类型,但是在使用的时候不知名数据类型,因此属于弱数据类型。
2、js嵌入到html的页面中:
1)行级 2)业内 3)外部文件
onclick:事件触发,对js函数的调用
Script type text:javascript
Script: src 引入另外一个js文件
3、js数据类型:数字类型,字符、字符串类型,对象类型(js 是吧页面中所有的标签都看作是节点对象)
4、变量:声明 变量 命名规范,js区分大小写,不能用数字开头
Var i= 23;//弱数据类型语言
Var s = "";
全局变量 局部变量 (js 只有方法体 才是局部) 参数也算是局部
在方法体中,必须加var 如果不加,方法调用以后就会变成全局变量
5、方法的定义和调用
Function test(){}
Function test(number1,nubmer2){}
Var test3 = function(){return ;}
方法的调用,可以在script标签体中直接调用,也可以是行级引入的方式,来通过事件条用自定义函数。
6、alert() prompt() document write() paresInt() parseFloat()
document.getElementById();//得到页面中某个标签对象, 如果这个标签是 input 那么当前对象.value 就会获得 输出框中的值。
7、docuemnt.f.username 通过表单的名称获得表单对象,通过输入框的名称得到输入框对象
(.value)
8、document.getElementById(),获得一个标签对象,innerText innerHTML也可以赋值
9、简单计算器:获得select 的对象,并且再获得 被选中的option value
10、Js中的数组: array
Var s = new Array();
Var s2 = new Array(5);
Var s3 = new Array(3,4,5,);
Var s4 = new Array("nihao");
对数组的操作,s[2]=34;s2[0];
新的知识点:
1、js中函数,eval isNaN
2、Js中事件:鼠标;
3、表单验证(正则表达式)
作业:
1、表单验证;
2、把验证时候的警告框换成在对应输入框后面显示。
eval 计算表达式的值,言外之意,只要是表达式,就可以进行计算。
举例:
var s = "1+2+3+4+5";
alert(s);//结果:1+2+3+4+5
s = eval(s);
alert(s);//结果:15
举例:
var a = "1*2*3*4*5";
eval("result="+a);
alert("result");
alert(result);
这段代码还是要注意一下:
第一个只输出result
第二个输出:120.
他把结果计算完毕后赋给result。所以eval里面是一个表达式。不仅完成了计算,并完成了赋值,再次说明eval进行的是一个表达式的运算。
isNaN运算一个变量是否是不是一个数字。
var a="34";是数字,
isNaN(a) ->false
var b = "asdf"//不是数字
isNaN(b) ->true
onload()当body正在加载的时候会调用此函数,所以他放在body体上。
onchange() 当前对象发生更改的时候调用此函数。
onclick()鼠标点击事件。
onfocus()获得焦点事件
onblur()失去焦点事件
经典片段:
<script type="text/javascript"> function test(obj){ if(obj.value==""){ obj.value="请输入要查询的东西"; }else if(obj.value=="请输入要查询的东西"){ obj.value=""; } } </script> </head> <body> <input type="text" value="请输入要查询的东西" onfocus="test(this)" onblur="test(this)"/> </body>
然后注意一下关于正则表达式的使用。
正则表达式在java语言里面和在js语言中是有区别的。
Java:String 待测字符串 = "";
String regex = "";
待测字符串.matches(regex);
javaScript:
var regex = ^ $;
var 待测字符串="";
regex.test(待测字符串);
两者返回的结果是一致的。表单验证的部分可以看看作为示例代码。
<!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" /> <title>无标题文档</title> <script type="text/javascript"> function checkUser(){ var email = document.getElementById("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(email)){ alert("邮箱的格式不正确!"); return false; } var boxs = document.getElementsByName("box"); var number = 0; for(var i = 0;i<boxs.length;i++){ if(boxs[i].checked == true){ number++; } } if(number <3){ alert("至少选择3个以上包含3!"); return false; } //var sexs = document.f.sex; var sexs = document.getElementsByName("sex"); if(sexs[0].checked == false && sexs[1].checked == false){ alert("请选择性别"); return false; } var username = document.getElementById("username"); if(username.value.length ==0){// username =="" username == null alert("用户名不能空!"); username.focus();// 自动让你的输入框获得焦点 return false; } var ps = document.getElementById("ps"); if(ps.value.length<6 || ps.value.length > 12 ){ alert("密码规则不符!6----12"); ps.select(); return false; } var ps2 = document.getElementById("ps2"); if(ps2.value!= ps.value){ alert("两次输入的不一致!"); return false; } var age = document.getElementById("age"); if(isNaN(age.value)){ alert("你的年龄是非法的!"); return false; } } </script> </head> <body> <form name="f" action="demo.html" onsubmit="return checkUser()"> 用户名:<input type="text" name="username" id="username"/> <br/> 密码:<input type="password" name="ps" id="ps"/> <br/> 确认密码:<input type="password" name="ps2" id="ps2"/> <br/> 年龄:<input type="text" name="age" id="age"/> <br/> 性别:<input type="radio" name="sex" value="0" />男 <input type="radio" name="sex" value="1"/> 女 <br/> 爱好:<input type="checkbox" name="box" value="0"/>篮球 <input type="checkbox" name="box" value="1"/>足球 <input type="checkbox" name="box" value="2"/>排球 <input type="checkbox" name="box" value="3"/>网球 <input type="checkbox" name="box" value="4"/>羽毛球 <br/> E-mail:<input type="text" id="email"/> <br/> <input type="submit" value="提交"/> </form> </body> </html>