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------表单提交事件，不是inputonMouseDown----鼠标按下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为选中，未选中为falseValue：设置复选框的值例子：<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>