javascript--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>