美文网首页前端开发那些事儿
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-函数、事件、获取表单元素

    一、函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 (1)无参数,无返回值函数。 弹出一个欢迎...

  • jquery事件

    jquery事件 事件函数列表: blur() 元素失去焦点focus() 元素获得焦点change() 表单元素...

  • jquery 事件、主动触发与自定义事件、事件冒泡

    jquery事件 事件函数列表: blur() 元素失去焦点 focus() 元素获得焦点 change() 表单...

  • 16

    jquery事件 事件函数列表: blur() 元素失去焦点 focus() 元素获得焦点 change() 表单...

  • 2019-06-18 事件函数列表

    jquery事件 事件函数列表: blur() 元素失去焦点 focus() 元素获得焦点 change() 表单...

  • jQuery事件

    jquery事件事件函数列表: blur() 元素失去焦点focus() 元素获得焦点change() 表单元素的...

  • 前端

    jquery事件事件函数列表: blur() 元素失去焦点focus() 元素获得焦点change() 表单元素的...

  • 15

    jquery事件事件函数列表: blur() 元素失去焦点focus() 元素获得焦点change() 表单元素的...

  • 网页17day

    jquery事件事件函数列表:blur() 元素失去焦点focus() 元素获得焦点change() 表单元素的值...

  • JS小知识点整合

    (一):获取元素 (二):变量 (三):函数 (四):流程控制语句几种形式 (五):循环 (六):表单元素和非表单...

网友评论

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

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