javascript--第12节-javascript表单处理

Javascript表单处理

1、javascript事件
onclick-----鼠标点击
onchange-------文本内容或下拉菜单中的选项发生改变
onfocus-----获得焦点
onblur------失去焦点
onMouseOver------鼠标滑过
onMouseOut-----鼠标离开
onMouseMove-------鼠标移动
onLoad------网页文档加载（网页加载完，最后执行）

例子：
<script>
window.onload =function(){
alert("1");
}

alert("2");

</script>
备注：先执行alert(2);在执行alert(1);

onSubmit------表单提交事件，不是input
onMouseDown----鼠标按下
onMouseUp------鼠标弹起

2、文本框对象事件
事件：onblur-----文本框失去焦点
Onchange--------------文本框失去焦点
Onfocus------------光标进入文本框中
方法：focus()-----获得焦点
Select()-----选中文本内容
属性：readonly—只读

例子一：
用户注册：

<form name="login">
用 户 名 ：<input type="text" name="username"><br/>
密       码：<input type="text" name="password"><br/>
确认密码：<input type="text" name="repeat"><br/>
邮      件：<input type="text" name="mail"><br/>
q         q：<input type="text" name="qq"><br/>
手 机 号 ：<input type="text" name="tel"><br/>
<input type="button" value="提交">
<script>
//用户名
document.login.username.onblur=function(){
if(this.value==""){
alert("用户名不能为空！");
this.focus();//获取焦点
this.select();//字符串被选中
}
}
//密码
document.login.password.onblur=function(){
if(this.value==""){
alert("密码不能为空！");
this.focus();//获取焦点
this.select();//字符串被选中
}
}

//确认密码
document.login.repeat.onblur=function(){
if(this.value==""){
alert("请输入密码！");
this.focus();//获取焦点
this.select();//字符串被选中
}else if(this.value!=document.login.password.value){
alert("两次输入的密码不一致！");
this.focus();//获取焦点
this.select();//字符串被选中
}
}
//邮件
document.login.mail.onblur=function(){
if(this.value==""){
alert("邮件不能为空！");
this.focus();//获取焦点
this.select();//字符串被选中
}
}
//qq
document.login.qq.onblur=function(){
if(this.value=="" && this.value.length>10 && isNaN(this.value)){
alert("qq号：不能为空且为10为以上且全是数字！");
this.focus();//获取焦点
this.select();//字符串被选中
}
}

//手机号
document.login.tel.onblur=function(){
if(this.value=="" && this.value.length>11 && isNaN(this.value)){
alert("qq号：不能为空且为10为以上且全是数字！");
this.focus();//获取焦点
this.select();//字符串被选中
}
}
</script>
</form>

例子二：银行登录表单

<form name="f1" method="get" action="#">
<input name="txt" type="text">
<input name="pass" type="password">
</form>
<script>
document.f1.txt.onblur = function(){
if(this.value ==""){
alert("不能为空");
}else if(this.value.substr(0,4) != "8888"){
alert("必须为8888");
this.select();//字符串被选中
this.focus();//获取焦点
}else if(isNaN(this.value)){
//isNaN(value); 判断value是否为数字，如果是 返回false否则返回true
alert("必须为纯数字");
}else if(this.value.length !=11){
alert("长度必须为11位");
}else{
document.f1.pass.focus();
}
}
document.f1.pass.onfocus = function(){
alert("请输入密码");

this.select();
}
</script>

3、按钮事件
命令按钮：
Onsubmit:表单提交时间，单击“提交”时产生
Onclick：按钮点击事件

例子：
onclick案例：
<form name="f1">
价格<input name="price" type="number">
数量<input name="num" type="number">
总价<input name="txt" type="text">
<input type="button" value="计算" name="sumb">
</form>
<script>
document.f1.sumb.onclick = function(){
var a=document.f1.price.value;
var b=document.f1.num.value;
var s = a*b;
document.f1.txt.value=s;
}
</script>

OnSubmit案例：

<form name="ff" method="get" action="login.php" onsubmit="return fun()">
<input type="text" name="us">
<input type="password" name="ps">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
<script>
function fun(){
if(document.ff.us.value == ""||document.ff.ps.value ==""){
return false;
}else{
return true;
}
}
</script>

4、复选框事件
事件：onblur:失去焦点
Onfocus：获取焦点
Onclick：点击事件
属性：checked：是否被选中，true为选中，未选中为false
Value：设置复选框的值

例子：
<form name="f">
<input type="checkbox" name="skin">北京
<input type="checkbox" name="skin">朝阳
<input type="checkbox" name="skin">通州
<input type="checkbox" name="skin">昌平

<input name="b" type="button" value="确认购买">
</form>
<script>
var shuzu=["北京","朝阳","通州","昌平"];
var str="";
var a=document.f.skin;
document.f.b.onclick=function(){
for(var n=0;n<a.length;n++){
if(a[n].checked){//0 1 2 3 4
str=str+shuzu[n];
}
}
if(window.confirm("您是否确认购买呢")){
document.write(str);
}else{
str="";
}
}
</script>

5、单选事件（和复选一样）
事件：onblur:失去焦点
Onfocus：获取焦点
Onclick：点击事件
属性：checked：是否被选中，true为选中，未选中为false
Value：设置复选框的值

例子：
<form name="f">
<input type="radio" value="女" name="sex">女
<input type="radio" value="男" name="sex">男
<input type="button" onclick="fun()">
</form>
<script>
function fun(){
var xuanze = document.f.sex.value;
alert("您的性别为"+xuanze);
}
</script>

6、下拉列表框事件
事件：onblur:失去焦点
Onfocus：获取焦点
Onchange：选项发生改变时发生
属性：Value：设置列表选框的值
Options：表示整个选项数组，第一个选项为option[0]……
selectedIndex：选项的索引号，第一个为0，第二个为1…….

例子：
<form name="ff">
<select name="ss" multiple="multiple">
<option>北京</option>
<option>河南</option>
<option>昌平</option>
<option>东北</option>
</select>
</form>
<script>
var op  = document.ff.ss.options;
document.ff.ss.onchange=function(){
alert(op[document.ff.ss.selectedIndex].value);
}
</script>