js温故而知新10(操作表单)——学习廖雪峰的js教程

simon_chen 发布于2019-08-20 15:08 / 2277人阅读

摘要：用操作表单和操作是类似的，因为表单本身也是树。因此，第二种方式是响应本身的事件，在提交时作修改可以在此修改的继续下一步注意要来告诉浏览器继续提交，如果，浏览器将不会继续提交，这种情况通常对应用户输入有误，提示用户错误信息后终止提交。

用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。

HTML表单的输入控件主要有以下几种：

文本框，对应的，用于输入文本；

口令框，对应的，用于输入口令；

单选框，对应的，用于选择一项；

复选框，对应的，用于选择多项；

下拉框，对应的，用户不可见，但表单提交时会把隐藏文本发送到服务器。

获取值

如果我们获得了一个节点的引用，就可以直接调用value获得对应的用户输入值：

// 
var input = document.getElementById("email");
input.value; // "用户输入的值"

这种方式可以应用于text、password、hidden以及select。但是，对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断：

//  Monday
//  Tuesday
var mon = document.getElementById("monday");
var tue = document.getElementById("tuesday");
mon.value; // "1"
tue.value; // "2"
mon.checked; // true或者false
tue.checked; // true或者false

设置值

设置值和获取值类似，对于text、password、hidden以及select，直接设置value就可以：

// 
var input = document.getElementById("email");
input.value = "test@example.com"; // 文本框的内容已更新

对于单选框和复选框，设置checked为true或false即可

HTML5控件

HTML5新增了大量标准控件，常用的包括date、datetime、datetime-local、color等，它们都使用标签

提交表单

方式一是通过

这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击

注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。

在检查和修改时，要充分利用来传递数据。

例如，很多登录表单希望用户输入用户名和口令，但是，安全考虑，提交表单时不传输明文口令，而是口令的MD5。普通JavaScript开发人员会直接修改：toMD5

这个做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个变成32个（因为MD5有32个字符）。

要想不改变用户的输入，可以利用实现：

注意到id为md5-password的标记了name="password"，而用户输入的id为input-password的没有name属性。没有name属性的的数据不会被提交。

操作文件

专线服务混合云廖雪峰的python教程 python教程廖雪峰 python廖雪峰教程廖雪峰python视频教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82020.html

js温故而知新11(AJAX)——学习廖雪峰的js教程

摘要：在回调函数中，通常我们只需通过判断请求是否完成，如果已完成，再根据判断是否是一个成功的响应。因此我们需要首先在页面中准备好回调函数当前价格最后用函数触发表示本域，也就是浏览器当前页面的域。 Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。如果仔细观察一个Form的提交，你就会发现，一旦用户点击Submit按钮，表单开始提...

kun_jian 2019-08-20 16:45 评论0 收藏0
js温故而知新8(浏览器)——学习廖雪峰的js教程

摘要：对象不但充当全局作用域，而且表示浏览器窗口。对象有和属性，可以获取浏览器窗口的内部宽度和高度。对象表示当前页面的信息。由于在浏览器中以形式表示为树形结构，对象就是整个树的根节点。这个行为由浏览器实现，主流浏览器均支持选项，从开始支持。浏览器目前主流的浏览器： IE 6~11：从IE10开始支持ES6标准； Chrome：基于Webkit内核，内置了非常强悍的JavaScript引...

charles_paul 2019-08-20 15:07 评论0 收藏0
js温故而知新3——学习廖雪峰的js教程

摘要：例如，在一个中，删掉偶数，只保留奇数，可以这么写把一个中的空字符串删掉，可以这么写注意以下的版本没有方法可见用这个高阶函数，关键在于正确实现一个筛选函数。回调函数接收的回调函数，其实可以有多个参数。 1.map 由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果： function po...

zhaot 2019-08-21 11:34 评论0 收藏0
js温故而知新2——学习廖雪峰的js教程

摘要：让我们拆开写小明正常结果单独调用函数怎么返回了请注意，我们已经进入到了的一个大坑里。如果单独调用函数，比如，此时，该函数的指向全局对象，也就是。函数 1. arguments JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array： function fo...

Caizhenhao 2019-08-21 11:34 评论0 收藏0
js温故而知新9(操作DOM)——学习廖雪峰的js教程

摘要：根节点已经自动绑定为全局变量。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免攻击。修改也是经常需要的操作。当你遍历一个父节点的子节点并进行删除操作时，要注意，属性是一个只读属性，并且它在子节点变化时会实时更新。 1.操作DOM 操作一个DOM节点实际上就是这么几个操作：更新、遍历、添加、删除。由于ID在HTML文档中是唯一的，所以document.getElementByI...

Alfred 2019-08-20 15:08 评论0 收藏0