美文网首页前端开发那些事儿
02-函数、事件、获取表单元素

02-函数、事件、获取表单元素

作者: D丝学编程 | 来源:发表于2021-04-21 14:24 被阅读0次

    一、函数

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

    (1)无参数,无返回值函数。

    弹出一个欢迎信息:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>无参,无返回值函数</title>
            <script type="text/javascript">
                //无参,无返回值函数
                function welcome()
                {
                    alert("欢迎来到****网站");
                }
            </script>
        </head>
        <body>
            <script type="text/javascript">
                welcome();
            </script>
        </body> 
    </html>
    

    (2)有参,无返回值函数。

    接受长方形的长和宽,计算出面积:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>有参,无返回值函数</title>
            <script type="text/javascript">
                //有参,无返回值函数
                //接受长方形的长和宽,求面积
                function getArea(width,height)
                {
                    var area = width*height;
                    alert("面积为:" + area);
                }
            </script>
        </head>
        <body>
            <script type="text/javascript">
                getArea(10,15);
            </script>
        </body>
    </html>
    

    (3)有参,有返回值函数。

    编写两个函数,一个接受长方形的长和宽,计算长方形面积;一个接受半径,计算出圆面积。

    分别调用函数求长方形面积,圆面积,和总面积:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>有参,有返回值函数</title>
            <script type="text/javascript">
                //有参,有返回值函数
                //计算长方形面积
                function getCfxArea(width,height)
                {
                    var area = width*height;
                    return area;
                }
                //计算圆面积
                function getYuanArea(r)
                {
                    var area = 3.14*r*r;
                    return area;
                }       
            </script>
        </head>
        <body>
            <script type="text/javascript">
                
                var cfxArea = getCfxArea(5,10);
                //var yuanArea = parseInt(getYuanArea(6));  //转换为整数
                var yuanArea = getYuanArea(6).toFixed(2);
                var allArea = parseFloat(cfxArea) + parseFloat(yuanArea);
                allArea = allArea.toFixed(2);
                alert("长方形面积:" + cfxArea + "\n圆面积:" + yuanArea + "\n总面积:" + allArea);
                
            </script>
        </body>
    </html>
    

    二、变量的作用域

    通过如下例子了解变量作用域:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>变量的作用域</title>
        </head>
        <body>
            <script type="text/javascript">
                //变量的作用域
                var myName = "刘德华";
                function showName()
                {
                    var myName = "张学友";
                    alert(myName + "欢迎您!");  //此处的myName为"张学友"
                }
                showName();
                alert(myName + "欢迎您!");  //此处的myName为"刘德华"
            </script>
        </body>
    </html>
    

    JS中变量只有在自己的作用域内才能使用,如果出现变量名冲突,则采取就近原则。

    三、常用系统函数

    (1)parseInt:转换为整型

    var obj; 
    obj = parseInt("150");          //150
    obj = parseInt("150Hello");     //150
    obj = parseInt("hello150");     //NaN
    obj = parseInt("hello");        //NaN
    obj = parseInt("6.66");         //6
    

    (2)parseFloat:转换为浮点型

    var obj; 
    obj = parseFloat("6");              //6
    obj = parseFloat("66.66Hello");     //66.66
    obj = parseFloat("hello66.66");     //NaN
    obj = parseFloat("hello");          //NaN
    obj = parseFloat("6.66");           //6.66
    obj = parseFloat(".666");           //0.666
    

    (3)isNaN:判断是否是数字,不是数字返回true,是数字返回false

    var obj;
    obj = isNaN("666");     //false
    obj = isNaN("6b66");    //true
    obj = isNaN("6.66");    //false
    obj = isNaN(" ");       //false,此处为特殊情况
    obj = isNaN("hello");   //true
    

    (4)eval:运行以字符串形式表示的JavaScript代码串

    var str = "1+2*3-4";
    var obj = eval(str);
    alert(obj);   //结果为3
    

    四、JS中常用事件

    本文介绍JS中常用事件包括:

    onclick、onload、onfocus、onblur、onchange、 onmouseover、onmouseout、onsubmit

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>JavaScript事件</title>
            <script type="text/javascript">
                //网页加载的时候执行的函数
                function onloadFun()
                {
                    alert("窗体被加载了!");
                }
                //网页关闭的时候执行的函数
                function closeFun()
                {
                    window.open("Demo06.html");
                }
                //点击某个对象的时候执行的函数
                function clickFun()
                {
                    alert("主人,你点击我做什么");
                }
                //离开某个标签的时候执行的函数
                function blurFun()
                {
                    alert("光标或焦点离开了元素");
                }
                //值发生改变的时候触发的事件函数
                function changeFun()
                {
                    alert("选项发生了改变");
                }
                //鼠标移入执行的函数
                function mouseoverFun()
                {
                    alert("鼠标移动进来了!");
                }
                //鼠标移出执行的函数
                function mouseoutFun()
                {
                    alert("鼠标移动出去了!");
                }
                //表单提交执行的函数
                function submitFun()
                {
                    alert("登录请求马上发送!");
                }
            </script>
        </head>
        <!--加载网页和关闭网页的事件,老版本浏览器支持onunload,现在大多数浏览器不支持-->
        <body onload="onloadFun();" onunload="closeFun();">
            <!--点击事件-->
            <input type="button" onclick="clickFun();" value="测试点击事件">  
            <!--光标或者焦点离开元素后触发事件-->
            <input type="text" onblur="blurFun();"> 
            <!--值发生改变的时候触发的事件-->
            <select onchange="changeFun();">
                <option>爱奇艺网站</option>
                <option>优酷网站</option>
                <option>A站</option>
                <option>B站</option>
            </select>
            <!--鼠标的移入移出事件-->
            <img src="img/486-160912223608.jpg" 
                width="100" onmouseover="mouseoverFun();" onmouseout="mouseoutFun();">
            <!--表单提交事件-->
            <br/><br/>
            <form method="post" onsubmit="submitFun();">
                用户名:<input type="text" name="acc" /><br>
                密码:<input type="password" name="pwd" /><br>
                    <input type="submit" value="登录" >
            </form>
        </body>
    </html>
    

    五、JS获取表单元素内容

    本章节内容主要介绍:

    (1)JS获取常见的表单元素内容;

    (2)使用匿名函数简化函数的定义及调用;

    (3)使用return false来阻止a标签的href跳转以及阻止表单的提交;

    一、获取常见的表单元素内容

    (1)获取文本框内容:

    <input type="text" id="txt1"> 
    <input type="button" value="获取文本框内容" onclick="getTxt()">
    
    function getTxt()
    {
        var obj = document.getElementById("txt1");
        alert(obj.value);
    }
    

    (2)获取单选框内容:

    <input type="radio" name="sex" id="boy" value="男"> 男 
    <input type="radio" name="sex" id="girl" value="女">女
    <input type="button" value="获取单选框内容" onclick="getRadio()">
    
    function getRadio()
    {
        //方案一:
        var objs = document.getElementsByName("sex");
        for(var i = 0;i<= objs.length;i++)
        {
            if(objs[i].checked == true)
                alert(objs[i].value);
        }
        //方案二:
        //var obj;
        //obj = document.getElementById("boy");
        //if(obj.checked == true)
        //  alert(obj.value);
        //obj = document.getElementById("girl");
        //if(obj.checked == true)
        //alert(obj.value);
    }
    

    (3)获取多选框内容:

    <input type="checkbox" name="hobby" value="抽烟"> 抽烟
    <input type="checkbox" name="hobby" value="喝酒"> 喝酒
    <input type="checkbox" name="hobby" value="烫头发"> 烫头发
    <input type="button" value="获取多选框内容" onclick="getCheckBox()">
    
    function getCheckBox()
    {
        var objs = document.getElementsByName("hobby");
        var strHobby = "";
        for(var i = 0;i<objs.length;i++)
        {
            if(objs[i].checked == false)
                continue;
            if(strHobby.length != 0)
                strHobby = strHobby + ",";
            strHobby = strHobby + objs[i].value;
        }
        alert(strHobby);
    }
    

    (4)获取下拉框内容:

    <select id="professional">
        <option value="">--请选择--</option>
        <option value="计算机">计算机</option>
        <option value="工商管理">工商管理</option>
        <option value="国际贸易">国际贸易</option>
        <option value="电子商务">电子商务</option>
    </select>
    <input type="button" value="获取下拉框内容" onclick="getSelect();">
    
    function getSelect()
    {
        var obj = document.getElementById("professional");
        alert(obj.value);
    }
    

    (5)获取多行文本框内容:

    <textarea rows="10" cols="60" id="mySelf"></textarea>
    <input type="button" value="获取多行文本框内容" onclick="getTextArea();">
    
    function getTextArea()
    {
        var obj = document.getElementById("mySelf");
        alert(obj.value);   
    }
    

    二、使用匿名函数简化函数的定义及调用

    通常情况下,JS中触发某事件调用某一个函数,需要编写一个函数,并且在HTML中编写事件调用代码;

    使用匿名函数,可以实现在HTML中无需编写事件调用代码;

    如下,点击按钮获取文本框内容:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>使用匿名函数简化函数的定义及调用</title>
        </head>
        <body>
            <form>
                文本框:<input type="text" id="txt1"> 
                     <input type="button" id="bt1" value="获取文本框内容">
                <br><br>
            </form>
        </body>
    </html>
    <script type="text/javascript">
        document.getElementById("bt1").onclick = function()
        {
            var obj = document.getElementById("txt1");
            alert(obj.value);
        }
    </script>
    

    三、使用return false来阻止a标签的href跳转以及阻止表单的提交

    (1)阻止a标签的href跳转:

    <a href="Demo09_01.html" onclick="return regClick();">立即注册</a>
    
    
    function regClick()
    {
        return false;
    }
    

    (2)阻止表单的提交:

    <form action="Demo09_02.html" onsubmit="return formSubmit();">
        用户名:<input type="text" id="txtAccount"><br><br>
        密    码:<input type="password" id="txtPwd"><br><br>
        <input type="submit" value="登录">
    </form>
    
    function formSubmit()
    {
        return false;
    }
    

    六、应用

    该章节使用上述1-5个章节知识点,制作一些小的应用案例。

    一、使用eval函数实现计算器

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>使用eval函数实现计算器</title>
            <script type="text/javascript">
                function compute()
                {
                    var obj = document.getElementById("txtContent");
                    var result = eval(obj.value);
                    document.getElementById("txtResult").value = result;
                }
            </script>
        </head>
        <body>
            请输入算术内容:
            <input type="text" id="txtContent">
            <input type="button" value="计算" onclick="compute();">
            <input type="text" id="txtResult">
        </body>
    </html>
    

    二、实现两个数字加减乘除的计算器

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>实现两个数字加减乘除的计算器</title>
            <script type="text/javascript">
                function compute()
                {
                    var num1 = document.getElementById("txt1").value;
                    var num2 = document.getElementById("txt2").value;
                    var fuhao = document.getElementById("fuhao").value;
                    if(isNaN(num1) || isNaN(num2))
                    {
                        alert("请输入数字进行计算!");
                        return;
                    }
                    if(fuhao.length == 0)
                    {
                        alert("请选择符号!");
                        return;
                    }
                    num1 = parseFloat(num1);
                    num2 = parseFloat(num2);
                    var result = 0;
                    if(fuhao == "+")
                        result = num1 + num2;
                    if(fuhao == "-")
                        result = num1 - num2;
                    if(fuhao == "*")
                        result = num1 * num2;
                    if(fuhao == "/")
                        result = num1 / num2;
                    document.getElementById("txtResult").value = result;    
                }
                
            </script>
        </head>
        <body>
            <input type="text" id="txt1">
            <select id="fuhao">
                <option value="">请选择符号</option>
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" id="txt2">
            <input type="button" value="计算" onclick="compute();">
            <input type="text" id="txtResult">
        </body>
    </html>
    

    三、注册表单验证

    (1)方案一:针对每个元素的合法性单独弹框进行提示;

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>注册表单验证</title>
            <script type="text/javascript">
                function reg()
                {
                    //用户名验证
                    var acc = document.getElementById("txtAccount").value;
                    if(acc.length == 0)
                    {
                        alert("用户名不能为空!");
                        return false;
                    }
                    if(acc.length < 6 || acc.length > 12)
                    {
                        alert("用户名长度必须在6-12位之间!");
                        return false;
                    }
                    //密码验证
                    var pwd = document.getElementById("txtPwd").value;
                    var pwdOk = document.getElementById("txtPwdOk").value;
                    if(pwd.length == 0)
                    {
                        alert("密码不能为空!");
                        return false;
                    }
                    if(pwd.length < 6 || pwd.length > 12)
                    {
                        alert("密码长度必须在6-12位之间!");
                        return false;
                    }
                    if(pwd != pwdOk)
                    {
                        alert("两次输入密码不一致!");
                        return false;
                    }
                    //性别验证
                    var objBoy = document.getElementById("rdBoy");
                    var objGirl = document.getElementById("rdGirl");
                    if(objBoy.checked == false && objGirl.checked == false)
                    {
                        alert("必须选择性别!");
                        return false;
                    }
                    //专业验证
                    var professional = document.getElementById("selProfessional").value;
                    if(professional.length == 0)
                    {
                        alert("请选择专业!");
                        return false;
                    }
                    //爱好验证
                    var hobbys = document.getElementsByName("hobby");
                    var boolFlag = false;
                    for(var i = 0;i< hobbys.length;i++)
                    {
                        if(hobbys[i].checked == true)
                        {
                            boolFlag = true;
                        }
                    }
                    if(boolFlag == false)
                    {
                        alert("爱好至少选择一项!");
                        return false;
                    }
                    return true;        
                }
            </script>
        </head>
        <body>
            <form action="Demo12_01.html" onsubmit="return reg();">
            <table width="1000" align="center">
                <caption>用户注册</caption>
                <tr>
                    <td width="300" align="right" height="30">用户名:</td>
                    <td width="700"><input type="text" id="txtAccount">
                        <span style="color: red;">*</span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">密码:</td>
                    <td width="700"><input type="password" id="txtPwd">
                        <span style="color: red;">*</span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">密码确认:</td>
                    <td width="700"><input type="password" id="txtPwdOk">
                        <span style="color: red;">*</span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">性别:</td>
                    <td width="700">
                        <input type="radio" name="sex" id="rdBoy" value="男">男
                        <input type="radio" name="sex" id="rdGirl" value="女">女  
                        <span style="color: red;">*</span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">专业:</td>
                    <td width="700">
                        <select id="selProfessional">
                            <option value="">--请选择--</option>
                            <option value="软件开发">软件开发</option>
                            <option value="电子商务">电子商务</option>
                            <option value="国际贸易">国际贸易</option>
                            <option value="工商管理">工商管理</option>
                            <option value="高级护理">高级护理</option>
                        </select>
                        <span style="color: red;">*</span>
                    </td>
                </tr>           
                <tr>
                    <td width="300" align="right" height="30">爱好:</td>
                    <td width="700">
                        <input type="checkbox" name="hobby" value="抽烟" />抽烟
                        <input type="checkbox" name="hobby" value="喝酒" />喝酒
                        <input type="checkbox" name="hobby" value="打游戏" />打游戏
                        <input type="checkbox" name="hobby" value="烫头发" />烫头发
                        <input type="checkbox" name="hobby" value="足球" />足球
                        <input type="checkbox" name="hobby" value="篮球" />篮球
                        <span style="color: red;">*</span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">自我介绍:</td>
                    <td width="700">
                        <textarea id="mySelf" rows="10" cols="60"></textarea>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">&nbsp;</td>
                    <td width="700">
                        <input type="submit" value="注册" />
                        <input type="reset" value="取消" />
                    </td>
                </tr>
            </table>    
            </form>
        </body>
    </html>
    

    (2)方案二:针对每个元素的合法性使用一个弹框,弹出所有的问题;

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>注册表单验证</title>
            <script type="text/javascript">
                function reg()
                {
                    var msg = "";
                    //用户名验证
                    var acc = document.getElementById("txtAccount").value;
                    if(acc.length == 0)
                        msg += "用户名不能为空!\n";
                    else if(acc.length < 6 || acc.length > 12)
                        msg += "用户名长度必须在6-12位之间!\n";
                    //密码验证
                    var pwd = document.getElementById("txtPwd").value;
                    var pwdOk = document.getElementById("txtPwdOk").value;
                    if(pwd.length == 0)
                        msg += "密码不能为空!\n";
                    else if(pwd.length < 6 || pwd.length > 12)
                        msg += "密码长度必须在6-12位之间!\n";
                    else if(pwd != pwdOk)
                        msg += "两次输入密码不一致!\n";
                    
                    //性别验证
                    var objBoy = document.getElementById("rdBoy");
                    var objGirl = document.getElementById("rdGirl");
                    if(objBoy.checked == false && objGirl.checked == false)
                        msg += "必须选择性别!\n";
                    //专业验证
                    var professional = document.getElementById("selProfessional").value;
                    if(professional.length == 0)
                        msg += "请选择专业!\n";
                    
                    //爱好验证
                    var hobbys = document.getElementsByName("hobby");
                    var boolFlag = false;
                    for(var i = 0;i< hobbys.length;i++)
                    {
                        if(hobbys[i].checked == true)
                        {
                            boolFlag = true;
                        }
                    }
                    if(boolFlag == false)
                        msg += "爱好至少选择一项!\n";
                    if(msg.length != 0)
                    {
                        alert(msg);
                        return false;
                    }
                    return true;
                }
            </script>
        </head>
        <body>
            <form action="Demo12_01.html" onsubmit="return reg();">
            <table width="1000" align="center">
                <caption>用户注册</caption>
                <tr>
                    <td width="300" align="right" height="30">用户名:</td>
                    <td width="700"><input type="text" id="txtAccount">
                        <span style="color: red;">*</span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">密码:</td>
                    <td width="700"><input type="password" id="txtPwd">
                        <span style="color: red;">*</span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">密码确认:</td>
                    <td width="700"><input type="password" id="txtPwdOk">
                        <span style="color: red;">*</span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">性别:</td>
                    <td width="700">
                        <input type="radio" name="sex" id="rdBoy" value="男">男
                        <input type="radio" name="sex" id="rdGirl" value="女">女  
                        <span style="color: red;">*</span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">专业:</td>
                    <td width="700">
                        <select id="selProfessional">
                            <option value="">--请选择--</option>
                            <option value="软件开发">软件开发</option>
                            <option value="电子商务">电子商务</option>
                            <option value="国际贸易">国际贸易</option>
                            <option value="工商管理">工商管理</option>
                            <option value="高级护理">高级护理</option>
                        </select>
                        <span style="color: red;">*</span>
                    </td>
                </tr>           
                <tr>
                    <td width="300" align="right" height="30">爱好:</td>
                    <td width="700">
                        <input type="checkbox" name="hobby" value="抽烟" />抽烟
                        <input type="checkbox" name="hobby" value="喝酒" />喝酒
                        <input type="checkbox" name="hobby" value="打游戏" />打游戏
                        <input type="checkbox" name="hobby" value="烫头发" />烫头发
                        <input type="checkbox" name="hobby" value="足球" />足球
                        <input type="checkbox" name="hobby" value="篮球" />篮球
                        <span style="color: red;">*</span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">自我介绍:</td>
                    <td width="700">
                        <textarea id="mySelf" rows="10" cols="60"></textarea>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">&nbsp;</td>
                    <td width="700">
                        <input type="submit" value="注册" />
                        <input type="reset" value="取消" />
                    </td>
                </tr>
            </table>
            
            </form>
        </body>
    </html>
    

    (3)方案三:表单元素合法性提示不适用弹框,直接在页面上及时显示。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>注册表单验证</title>
            <style type="text/css">
                .errInfo{color: red; font-size: 12px;}
                .errInfo img{ vertical-align:middle;}
            </style>
            <script type="text/javascript">
                //检查用户名
                function CheckAccount()
                {
                    var acc = document.getElementById("txtAccount").value;
                    var objSpan = document.getElementById("spanAccount");
                    if(acc.length == 0)
                    {
                        objSpan.innerHTML = "<img src='img/li_err.gif'> 用户名不能为空!";
                        return false;
                    }
                    else if(acc.length < 6 || acc.length > 12)
                    {
                        objSpan.innerHTML = "<img src='img/li_err.gif'> 用户名长度必须在6-12位之间!";
                        return false;   
                    }
                    else
                    {
                        objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                        return true;
                    }
                }
                
                //检查密码
                function CheckPwd()
                {
                    //密码验证
                    var pwd = document.getElementById("txtPwd").value;
                    var pwdOk = document.getElementById("txtPwdOk").value;
                    var objSpan = document.getElementById("spanPwd");
                    if(pwd.length == 0)
                    {
                        objSpan.innerHTML = "<img src='img/li_err.gif'> 密码不能为空!";
                        return false;
                    }
                    else if(pwd.length < 6 || pwd.length > 12)
                    {
                        objSpan.innerHTML = "<img src='img/li_err.gif'> 密码长度必须在6-12位之间!";
                        return false;
                    }
                    else
                    {
                        objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                        return true;
                    }
                }
                
                //检查密码确认
                function CheckPwdOk()
                {
                    var pwd = document.getElementById("txtPwd").value;
                    var pwdOk = document.getElementById("txtPwdOk").value;
                    var objSpan = document.getElementById("spanPwdOk");
                    if(pwdOk.length == 0)
                    {
                        objSpan.innerHTML = "<img src='img/li_err.gif'> 密码确认不能为空!";
                        return false;   
                    }
                    else if(pwd != pwdOk)
                    {
                        objSpan.innerHTML = "<img src='img/li_err.gif'> 两次输入密码不一致!";
                        return false;
                    }
                    else
                    {
                        objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                        return true;
                    }
                }
                
                //检查性别
                function CheckSex()
                {
                    var objBoy = document.getElementById("rdBoy");
                    var objGirl = document.getElementById("rdGirl");
                    var objSpan = document.getElementById("spanSex");
                    if(objBoy.checked == false && objGirl.checked == false)
                    {
                        objSpan.innerHTML = "<img src='img/li_err.gif'> 必须选择性别!";
                        return false;
                    }
                    else
                    {
                        objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                        return true;
                    }
                }
                
                //检查专业
                function CheckProfessional()
                {
                    var professional = document.getElementById("selProfessional").value;
                    var objSpan = document.getElementById("spanProfessional");
                    if(professional.length == 0)
                    {
                        objSpan.innerHTML = "<img src='img/li_err.gif'> 请选择专业!";
                        return false;
                    }
                    else
                    {
                        objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                        return true;
                    }
                }
                
                //检查爱好
                function CheckHobby()
                {
                    var objSpan = document.getElementById("spanHobby");
                    var hobbys = document.getElementsByName("hobby");
                    var boolFlag = false;
                    for(var i = 0;i< hobbys.length;i++)
                    {
                        if(hobbys[i].checked == true)
                        {
                            boolFlag = true;
                        }
                    }
                    if(boolFlag == false)
                    {
                        objSpan.innerHTML = "<img src='img/li_err.gif'> 爱好至少选择一项!";
                        return false;
                    }
                    else
                    {
                        objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                        return true;                    
                    }
                }
                
                //注册表单提交
                function reg()
                {
                    if(CheckAccount() & CheckPwd() & CheckPwdOk() & CheckSex() 
                    & CheckProfessional() & CheckHobby() )
                        return true;
                    else
                        return false;
    //                  
    //              var boolResult = true;
    //              boolResult = CheckAccount()?boolResult:false;
    //              boolResult = CheckPwd()?boolResult:false;
    //              boolResult = CheckPwdOk()?boolResult:false;
    //              boolResult = CheckSex()?boolResult:false;
    //              boolResult = CheckProfessional()?boolResult:false;
    //              boolResult = CheckHobby()?boolResult:false;
    //              return boolResult;
                    
                }
                
                
            </script>
        </head>
        <body>
            <form action="Demo12_01.html" onsubmit="return reg();">
            <table width="1000" align="center">
                <caption>用户注册</caption>
                <tr>
                    <td width="300" align="right" height="30">用户名:</td>
                    <td width="700"><input type="text" id="txtAccount" onblur="CheckAccount();">
                        <span id="spanAccount" class="errInfo"></span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">密码:</td>
                    <td width="700"><input type="password" id="txtPwd" onblur="CheckPwd();">
                        <span id="spanPwd" class="errInfo"></span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">密码确认:</td>
                    <td width="700"><input type="password" id="txtPwdOk" onblur="CheckPwdOk();">
                        <span id="spanPwdOk" class="errInfo"></span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">性别:</td>
                    <td width="700">
                        <input type="radio" name="sex" id="rdBoy" value="男" onblur="CheckSex();">男
                        <input type="radio" name="sex" id="rdGirl" value="女" onblur="CheckSex();">女 
                        <span id="spanSex" class="errInfo"></span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">专业:</td>
                    <td width="700">
                        <select id="selProfessional" onblur="CheckProfessional();">
                            <option value="">--请选择--</option>
                            <option value="软件开发">软件开发</option>
                            <option value="电子商务">电子商务</option>
                            <option value="国际贸易">国际贸易</option>
                            <option value="工商管理">工商管理</option>
                            <option value="高级护理">高级护理</option>
                        </select>
                        <span id="spanProfessional" class="errInfo"></span>
                    </td>
                </tr>           
                <tr>
                    <td width="300" align="right" height="30">爱好:</td>
                    <td width="700" >
                        <input type="checkbox" name="hobby" value="抽烟" onblur="CheckHobby();"/>抽烟
                        <input type="checkbox" name="hobby" value="喝酒" onblur="CheckHobby();"/>喝酒
                        <input type="checkbox" name="hobby" value="打游戏" onblur="CheckHobby();"/>打游戏
                        <input type="checkbox" name="hobby" value="烫头发" onblur="CheckHobby();"/>烫头发
                        <input type="checkbox" name="hobby" value="足球" onblur="CheckHobby();"/>足球
                        <input type="checkbox" name="hobby" value="篮球" onblur="CheckHobby();"/>篮球
                        <span id="spanHobby" class="errInfo"></span>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">自我介绍:</td>
                    <td width="700">
                        <textarea id="mySelf" rows="10" cols="60"></textarea>
                    </td>
                </tr>
                <tr>
                    <td width="300" align="right" height="30">&nbsp;</td>
                    <td width="700">
                        <input type="submit" value="注册" />
                        <input type="reset" value="取消" />
                    </td>
                </tr>
            </table>
            
            </form>     
        </body>
    </html>
    

    相关文章

      网友评论

        本文标题:02-函数、事件、获取表单元素

        本文链接:https://www.haomeiwen.com/subject/iyhzkltx.html