javascript--javascript表单处理

冷不防 2022-09-21 13:26 204阅读 0赞

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>