Javascript基础系列(十三)-表单

表单脚本

HTML中 form 表示表单

action: 接收请求的URL
elements: 表单所有控件的集合
length：表单控件数量
method： 请求方式Get，post
name： 表单名称
submit： 表单提交
reset： 表单重置
target: 发送请求和接受响应的窗口名称
acceptCharset：服务器处理在字符集
enctype：请求编码类型

表单字段事件

blur，change，focus

文本框脚本

• input-text： 单行文本
• textarea： 多行文本

约束验证API

• 必填 required
• 类型约束 email 、url
• 数字范围 range
• 正则 pattern = "\d+"
• 检测有效性 checkValidity()
• 禁用校验 novalidate

代码序列化
function serialize(form) {
	var parts = [],
		field = null,
		i,
		len,
		j,
		optLen,
		option,
		optValue;

	for (i = 0, len = form.elements.length; i < len; i++) {
		field = form.elements[i];

		switch (field.type) {
			case "select-one":
			case "select-multiple":
				if (field.name.length) {
					for (j = 0, optLen = field.options.length; j < optLen; j++) {
						option = field.options[j];
						if (option.selected) {
							optValue = "";
							if (option.hasAttribute) {
								optValue = (option.hasAttribute("value") ?
									option.value : option.text);
							} else {
								optValue = (option.attributes["value"].specified ?
									option.value : option.text);
							}
							parts.push(encodeURIComponent(field.name) + "=" +
								encodeURIComponent(optValue));
						}
					}
				}
				break;

			case undefined: //字段集
			case "file": //文件输入
			case "submit": //提交按钮
			case "reset": //重置按钮
			case "button": //自定义按钮
				break;

			case "radio": //单选按钮
			case "checkbox": //复选框
				if (!field.checked) {
					break;
				}
				/* 执行默认操作 */
			default:
				//不包含没有名字的表单字段
				if (field.name.length) {
					parts.push(encodeURIComponent(field.name) + "=" +
						encodeURIComponent(field.value));
				}
		}
	}
	return parts.join("&");
}

富文本编辑框

本质： 在页面中嵌入一个包含空的HTML页面的iframe ， 通过设置designMode属性 contenteditable ，使这个空白的HTML页面可以编辑

操作方式

document.execCommand() 来处理文本,第二个参数始终设置false，为了浏览器的兼容

命令	值（第三个参数）	说明
backcolor	颜色字符串	设置文档的背景颜色
bold	null	将选择的文本转换为粗体
copy	null	将选择的文本复制到剪贴板
createlink	URL字符串	将选择的文本转换成一个链接，指向指定的URL
delete	null	删除选择的文本
cut	null	将选择的文本剪切到剪贴板
fontname	字体名称	将选择的文本修改为指定字体
fontsize	1～7	将选择的文本修改为指定字体大小
forecolor	颜色字符串	将选择的文本修改为指定的颜色
formatblock	要包围当前文本块的	使用指定HTML标签来格式化选择的文本块
indent	null	缩进文本
inserthorizontalrule	null	在插入字符处插入一个<hr>元素
insertorderedlist	null	在插入字符处插入一个<ol>元素
insertimage	图像的URL	在插入字符处插入一个图像
insertunorderedlist	null	在插入字符处插入一个<ul>元素
insertparagraph	null	在插入字符处插入一个<p>元素
italic	null	将选择的文本转换成斜体
justifycenter	null	将插入光标所在文本块居中对齐
justifyleft	null	将插入光标所在文本块左对齐
outdent	null	凸排文本（减少缩进）
paste	null	将剪贴板中的文本粘贴到选择的文本
removeformat	null	移除插入光标所在文本块的块级格式。这是撤销formatblock命令的操作
selectall	null	选择文档中的所有文本
underline	null	为选择的文本添加下划线
unlink	null	移除文本的链接。这是撤销createlink命令的操作