JavaScript总结

来源：互联网发布：搭建个人云计算平台编辑：程序博客网时间：2024/06/07 06:14

获取表单中的元素

document.表单名.输入框的name属性.value;

例如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>获取表单中的元素</title>    <script type="text/javascript">        function show () {            var username = document.myForm.username.value;            var password = document.myForm.password.value;            /**             *  如果多个控件具有相同的name属性，应该按照数组的形式取出：             *  见下面的代码，取出单选按钮和复选框中的内容都是应用了这种方式             */            var sex = "";            if (document.myForm.sex[0].checked)                 sex = document.myForm.sex[0].value;            else                sex = document.myForm.sex[1].value;            var intrest = "";            for (var i = 0; i < myForm.intrest.length; i++) {                if (document.myForm.intrest[i].checked) {                    intrest += document.myForm.intrest[i].value + ",";                }            }            var dept = "";            for (var i = 0; i < myForm.dept.length; i++) {                if (document.myForm.dept[i].selected) {                    dept = document.myForm.dept[i].value;                }            }            alert("你输入的信息是：" + username + "|" + password + "|"+ sex + "|" + intrest + "|" +dept);        }    </script></head><body>    <form name="myForm" method="post" action="">        用户名：<input type="text" name="username"><br>        密码：<input type="password" name="password"><br>        性别: <input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女" checked="true">女<br>        兴趣:<input type="checkbox" name="intrest" value="唱歌">唱歌            <input type="checkbox" name="intrest" value="游泳">游泳            <input type="checkbox" name="intrest" value="画画" checked="true">画画            <input type="checkbox" name="intrest" value="看书">看书<br>        部门:        <select name="dept">            <option value="技术部">技术部</option>            <option value="销售部">销售部</option>            <option value="财务部" selected="true">财务部</option> <!-- 注意这里是selected属性，在js判断时也需要注意这些 -->            <option value="人事部">人事部</option>        </select>           <button onclick="show()">侠士</button>    </form></body></html>

JS实现表单验证

首先我们要明确一点：
表单在提交的时候会触发onsubmit事件而不是onclick事件，因为即使表单验证失败，它还是会将信息提交给服务器。
关于数据合法性的检测，可以使用正则匹配。
例如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>表单验证</title>    <script type="text/javascript">        function validate (f) {            var email = f.email.value;            /*             *  javascript中正则的语法：             *  /^匹配模式$/.test(需要验证的文本)，其中^表示正则开始，$表示正则结束             *  正则的返回值是布尔类型             */            if (/^\w+@\w+.\w+$/.test(email))                 return true;            alert("Email格式不正确！");            f.email.focus();    // 让email获得焦点            f.email.select();   // 让输入的内容全选            return false;        }    </script></head><body>    <!-- 在onsubmit事件中传入this，并接受validate函数的返回值,只有验证通过才会提交到test.html -->    <form name="myForm" method="post" action="test.html" onsubmit="return validate(this)">        邮箱：<input type="text" name="email"><br>        <input type="submit" value="提交"><input type="reset" value="重置">    </form></body></html>

js获取下拉列表中的值，同步显示到页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>获取下拉列表中的内容显示到页面</title>    <script type="text/javascript">        function show (f) {            document.myForm.result.value = dept = f.value;;        }    </script></head><body>    <form name="myForm" method="post" action="">        <select name="dept" onchange="show(this)">            <option value="技术部">技术部</option>            <option value="销售部">销售部</option>            <option value="财务部" selected="true">财务部</option>            <option value="人事部">人事部</option>        </select>           <input type="text" name="result">    </form></body></html>

效果图：
这里写图片描述

js操作DOM

动态向网页中插入内容

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>javascript操作xml</title>    <script type="text/javascript">        window.onload = function(){            var select = document.getElementById('area');               // 取得下拉列表框            var id = [1,2,3,4,5];                                       // 准备好需要插入的数据            var data = ['北京','上海','广州','南京','杭州'];            select.options[0].select = true;                            // 设置第一个为默认选中            for (var i = 0; i < id.length; i++) {                var option = document.createElement('option');          // 创建节点                option.setAttribute('value',id);                        // 为节点设置属性                option.appendChild(document.createTextNode(data[i]));   // 为节点添加文本内容                select.appendChild(option);                             // 追加节点            }        }    </script></head><body>    <form>        <select id="area" name="area">            <option value="0">没有地区</option>        </select>    </form></body></html>

0 0