表单
表单HTML <form>
元素表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息。
<!-- Form which will send a GET request to the current URL -->
<form>
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- Form which will send a POST request to the current URL -->
<form method="post">
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- Form with fieldset, legend, and label -->
<form method="post">
<fieldset>
<legend>Title</legend>
<label><input type="radio" name="radio"> Select me</label>
</fieldset>
</form>
-
[name]
表单的名称。HTML 4 中不推荐(应使用id
)。在 HTML 5 中,该值必须是所有表单中独一无二的,而且不能是空字符串。 -
[action]
处理表单提交的 URL。这个值可被[<button>]
、[<input type="submit">]
或[<input type="image">]
元素上的[formaction]
属性覆盖。 -
[method]
浏览器使用这种 HTTP 方式来提交 表单。可能的值有:•
post
:指的是 HTTP POST 方法;表单数据会包含在表单体内然后发送给服务器。 •get
:指的是 HTTP GET 方法;表单数据会附加在action
属性的 URL 中,并以 '?' 作为分隔符,没有副作用 时使用这个方法。 •dialog
:如果表单在[<dialog>]
元素中,提交时关闭对话框。此值可以被[<button>]
、[<input type="submit">]
或[<input type="image">]
元素中的[formmethod]
属性覆盖。
事件
事件是在编程时系统内发生的动作或者发生的事情,系统响应事件后,如果需要可以某种方式对事件做出回应。在 Web 中,事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分 — 可能是一个元素、一系列元素、被加载到这个窗口的 HTML 代码或者是整个浏览器窗口。
const btn = document.querySelector('button');
function random(number) {
return Math.floor(Math.random()*(number+1));
}
btn.onclick = function() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
每个可用的事件都会有一个**事件处理器,也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候,我们说我们注册了一个事件处理器**。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的,尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生,然后处理器就是对事件发生做出的回应。
- onfocus 文档获得焦点时调用的函数。
- onblur 文档失去焦点时调用的函数,适合触发数据验证。
- onchange 检测
<select>
菜单中选择的值何时更改,不可用于验证空域。 - 按键
- onkeypress 通俗意义上的按下按钮 (按下并松开)。
- onkeyup 按键动作的一部分,松开。
- onkeydown 按键动作的一部分,按下。
innerHTML
innerHTML 设置或获取 HTML 语法表示的元素的后代,可以用来检查当前页面自最初加载到当前的 HTML 源码的变化。
const content = element.innerHTML;
element.innerHTML = htmlString;
设置 innerHTML
的值可以让你轻松地将当前元素的内容替换为新的内容。举个例子来说,你可以通过文档 [body]
属性删除 body 的全部内容。
document.body.innerHTML = "";
下面这个例子,首先获取文档当前的 HTML 标记并替换 "<"
字符为 HTML 实体 "<"
,从本质上来看,它是将 HTML 转换成原始文本,将其包裹在 [<pre>]
元素中。然后 innerHTML
的值被替换成新的字符串。最后,文档的内容被替换为页面显示源码。
document.documentElement.innerHTML = "<pre>" +
document.documentElement.innerHTML.replace(/</g,"<") +
"</pre>";
当给 innerHTML
设置一个值的时候到底发生了什么?用户代理按照以下步骤:
- 给定的值被解析为 HTML 或者 XML(取决于文档类型),结果就是
[DocumentFragment]
对象代表元素新设置的 DOM 节点。 - 如果元素内容被替换成
[<template>]
元素,<template>
元素的[content]
属性会被替换为步骤 1 中创建的新的DocumentFragment
。 - 对于其他所有元素,元素的内容都被替换为新的
DocumentFragment
节点。
用 innerHTML
插入文本到网页中并不罕见。但这有可能成为网站攻击的媒介,从而产生潜在的安全风险问题。基于这个原因,当插入纯文本时,建议不要使用 innerHTML
。取而代之的是使用 [Node.textContent]
,它不会把给定的内容解析为 HTML,它仅仅是将原始文本插入给定的位置。
正则表达式
正则表达式用于匹配字符串中字符组合的模式。在 JavaScript 中,正则表达式也是对象。使用一个正则表达式字面量,其由包含在斜杠之间的模式组成,如下所示:
var re = /ab+c/;
脚本加载后,正则表达式字面量就会被编译。当正则表达式保持不变时,使用此方法可获得更好的性能。
或者调用[RegExp]
对象的构造函数,如下所示:
var re = new RegExp("ab+c");
在脚本运行过程中,用构造函数创建的正则表达式会被编译。如果正则表达式将会改变,或者它将会从用户输入等来源中动态地产生,就需要使用构造函数来创建正则表达式。
编写一个正则表达式的模式
使用简单模式
简单模式是由你想直接找到的字符构成。比如,/abc/
这个模式就能且仅能匹配 "abc" 字符按照顺序同时出现的情况。例如在 "Hi, do you know your abc's?" 和 "The latest airplane designs evolved from slabcraft." 中会匹配成功。在上述两个例子中,匹配的子字符串是 "abc"。但是在 "Grab crab" 中会匹配失败,因为它虽然包含子字符串 "ab c",但并不是准确的 "abc"。
使用特殊字符
当你需要匹配一个不确定的字符串时,比如寻找一个或多个 "b",或者寻找空格,可以在模式中使用特殊字符。比如,你可以使用 /ab*c/
去匹配一个单独的 "a" 后面跟了零个或者多个 "b",同时后面跟着 "c" 的字符串:*
的意思是前一项出现零次或者多次。在字符串 "cbbabbbbcdebc" 中,这个模式匹配了子字符串 "abbbbc"。
用到的符号
-
特殊字符用反斜杠"\”进行转义
- 在非特殊字符之前的反斜杠表示下一个字符是特殊字符,不能按照字面理解。例如,前面没有 "\" 的 "b" 通常匹配小写字母 "b",即字符会被作为字面理解,无论它出现在哪里。但如果前面加了 "\",它将不再匹配任何字符,而是表示一个字符边界。
- 在特殊字符之前的反斜杠表示下一个字符不是特殊字符,应该按照字面理解。
-
^
匹配输入的开始。如果多行标志被设置为 true,那么也匹配换行符后紧跟的位置。例如,
/^A/
并不会匹配 "an A" 中的 'A',但是会匹配 "An E" 中的 'A'。 -
$
匹配输入的结束。如果多行标志被设置为 true,那么也匹配换行符前的位置。例如,
/t$/
并不会匹配 "eater" 中的 't',但是会匹配 "eat" 中的 't'。 -
*
匹配前一个表达式 0 次或多次。等价于{0,}
。例如,/bo*/
会匹配 "A ghost boooooed" 中的 'booooo' 和 "A bird warbled" 中的 'b',但是在 "A goat grunted" 中不会匹配任何内容。 -
+
匹配前面一个表达式 1 次或者多次。等价于{1,}
。例如,/a+/
会匹配 "candy" 中的 'a' 和 "caaaaaaandy" 中所有的 'a',但是在 "cndy" 中不会匹配任何内容。 -
.
(小数点)默认匹配除换行符之外的任何单个字符。例如,/.n/
将会匹配 "nay, an apple is on the tree" 中的 'an' 和 'on',但是不会匹配 'nay'。如果s
("dotAll") 标志位被设为 true,它也会匹配换行符。 -
(x)
像下面的例子展示的那样,它会匹配 'x' 并且记住匹配项。其中括号被称为捕获括号。模式
/(foo) (bar) \\1 \\2/
中的 '(foo)
' 和 '(bar)
' 匹配并记住字符串 "foo bar foo bar" 中前两个单词。模式中的\\1
和\\2
表示第一个和第二个被捕获括号匹配的子字符串,即foo
和bar
,匹配了原字符串中的后两个单词。注意\\1
、\\2
、...、\\n
是用在正则表达式的匹配环节。而在正则表达式的替换环节,则要使用像$1
、$2
、...、$n
这样的语法,例如,'bar foo'.replace(/(...) (...)/, '$2 $1')
。$&
表示整个用于匹配的原字符串。 -
大括号
{n}
n 是一个正整数,匹配了前面一个字符刚好出现了 n 次。比如, /a{2}/ 不会匹配“candy”中的'a',但是会匹配“caandy”中所有的 a,以及“caaandy”中的前两个'a'。{n,}
n 是一个正整数,匹配前一个字符至少出现了 n 次。例如,/a{2,}/ 匹配 "aa", "aaaa" 和 "aaaaa" 但是不匹配 "a"。{n,m}
n 和 m 都是整数。匹配前面的字符至少 n 次,最多 m 次。如果 n 或者 m 的值是 0,这个值被忽略。例如,/a{1, 3}/ 并不匹配“cndy”中的任意字符,匹配“candy”中的 a,匹配“caandy”中的前两个 a,也匹配“caaaaaaandy”中的前三个 a。注意,当匹配”caaaaaaandy“时,匹配的值是“aaa”,即使原始的字符串中有更多的 a。
-
x|y
中介字符匹配‘x’或者‘y’。例如,/green|red/匹配“green apple”中的‘green’和“red apple”中的‘red’ -
[xyz]
以方括号围起的字符串,一个字符集合。匹配方括号中的任意字符,包括转义序列。你可以使用破折号(-)来指定一个字符范围。对于点(.)和星号(*)这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义,不过转义也是起作用的。例如,[abcd] 和 [a-d] 是一样的。他们都匹配"brisket"中的‘b’,也都匹配“city”中的‘c’。/[a-z.]+/ 和/[\w.]+/与字符串“test.i.ng”匹配。
其他知识点:
-
this:与其他语言相比,函数的
this
关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下,函数的调用方式决定了this
的值(运行时绑定)。// 在浏览器中,window 对象同时也是全局对象: console.log(this === window); // true a = 37; console.log(window.a); // 37 this.b = "MDN"; console.log(window.b) // "MDN" console.log(b) // "MDN"
-
<span>短语内容的通用行内容器,并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用类或者 Id 属性),或者这些元素有着共同的属性,比如lang 。应该在没有其他合适的语义元素时才使用它。
<span>
与[<div>]
元素很相似,但[<div>]
是一个 块元素而<span>
则是 行内元素 (en-US).<p><span>一些文字</span></p>
-
字符串长度length:该属性返回字符串中字符编码单元的数量。JavaScript 使用 UTF-16 编码,该编码使用一个 16 比特的编码单元来表示大部分常见的字符,使用两个代码单元表示不常用的字符。因此 length 返回值可能与字符串中实际的字符数量不相同。
- 空字符串的
length
为 0。 - 静态属性 String.length 返回 1。
var x = "Mozilla"; var empty = ""; console.log("Mozilla is " + x.length + " code units long"); /* "Mozilla is 7 code units long" */ console.log("The empty string is has a length of " + empty.length); /* "The empty string is has a length of 0" */
- 空字符串的
-
<script>:用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码。
<script>
元素也能在其他语言中使用,比如 WebGL 的 GLSL 着色器语言。- **
[src]
这个属性定义引用外部脚本的 URI,这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的 script 元素标签内不应该再有嵌入的脚本。 - **
[type]
该属性定义 script 元素包含或src
引用的脚本语言。属性的值为 MIME 类型; 支持的 MIME 类型包括text/javascript
,text/ecmascript
,application/javascript
, 和application/ecmascript
。如果没有定义这个属性,脚本会被视作 JavaScript。 如果 MIME 类型不是 JavaScript 类型(上述支持的类型),则该元素所包含的内容会被当作数据块而不会被浏览器执行。 - **
[text]
和 textContent 属性类似,本属性用于设置元素的文本内容。但和 textContent 不一样的是,本属性在节点插入到 DOM 之后,此属性被解析为可执行代码。
- **
-
<link>:定了当前文档与外部资源的关系。该元素最常用于链接样式表,此外也可以被用来创建站点图标 (比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。
<link href="main.css" rel="stylesheet">
在这个简单的例子中,使用了
href
属性设置外部资源的路径,并设置rel
属性的值为“stylesheet
”(样式表)。rel
表示“关系 (relationship) ”,它可能是<link>
元素其中一个关键的特性——属性值表示<link>
项的链接方式与包含它的文档之间的关系。你将在我们的链接类型中看到很多不同类型的关系。[type]
这个属性被用于定义链接的内容的类型。这个属性的值应该是像 text/html,text/css 等 MIME 类型。这个属性常用的用法是定义链接的样式表,最常用的值是表明了 CSS 的 text/css -
isNaN用来确定一个值是否为
[NaN]
。注:isNaN
函数内包含一些非常有趣的规则;你也可以使用 ECMAScript 2015 中定义的[Number.isNaN()]
来判断。isNaN(NaN); // true isNaN(undefined); // true isNaN({}); // true isNaN(true); // false isNaN(null); // false isNaN(37); // false // strings isNaN("37"); // false: 可以被转换成数值 37 isNaN("37.37"); // false: 可以被转换成数值 37.37 isNaN("37,5"); // true isNaN('123ABC'); // true: parseInt("123ABC") 的结果是 123,但是 Number("123ABC") 结果是 NaN isNaN(""); // false: 空字符串被转换成 0 isNaN(" "); // false: 包含空格的字符串被转换成 0 // dates isNaN(new Date()); // false isNaN(new Date().toString()); // true isNaN("blabla") // true: "blabla"不能转换成数值 // 转换成数值失败,返回 NaN
-
submit类型的
[<input>]
元素会渲染为按钮。当[click]
事件发生时(用户点击按钮是一个典型的点击事件), 用户代理尝试提交表单到服务器。<input type="submit" value="Send Request" />
-
**form.submit**用来提交表单
[<form>]
。document.forms["myform"].submit();
这个方法和触发提交表单按钮很类似,但有所不同:
- 没有引发
[submit]
事件处理程序不会运行。 - 不会触发约束验证 。
- 没有引发
案例:一个可以验证数值正确性的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form check</title>
<link rel="stylesheet" type="text/css" href="bannerocity.css">
<script>
function validateNonEmpty(inputField, helpText){
if (inputField.value.length == 0){
if (helpText != null)
helpText.innerHTML = "please enter a value";
return false;
}
else {
if (helpText != null)
helpText.innerHTML ="";
return true;
}
}
function validateLength(minLength, maxLength, inputField, helpText){
if (inputField.value.length < minLength || inputField.value.length > maxLength){
if (helpText != null)
helpText.innerHTML = "please enter a value" + minLength + " to " + maxLength + " characters in length.";
return false;
}
else {
if (helpText != null)
helpText.innerHTML ="";
return true;
}
}
function validateZIPCode(inputField,helpText){
if (inputField.value.length!=5){
if (helpText != null)
helpText.innerHTML ="please enter exactly five digits.";
return false;
}
else if (isNaN(inputField.value)){
if (helpText != null)
helpText.innerHTML ="please enter a number.";
return false;
}
else {
if (helpText != null)
helpText.innerHTML ="";
return true;
}
}
function placeOrder(form){
if(validateLength(1, 32, form["message"], form["message_help"]) &&
validateZIPCode(form["zipcode"],form["zipcode_help"]) &&
validateNonEmpty(form["date"],form["date_help"]) &&
validateNonEmpty(form["name"],form["name_help"]) &&
validateNonEmpty(form["phone"],form["phone_help"]) &&
validateNonEmpty(form["email"],form["email_help"]) ){
form.submit();
}
else {
alert("sorry but there is something wrong with the information");
}
}
function validateRegEX(regex, inputStr, helpText, helpMessage){
if (!regex.test(inputStr)){
if (helpText != null)
helpText.innerHTML = helpMessage;
return false;
}
else {
if (helpText != null)
helpText.innerHTML ="";
return true;
}
}
function validateDate(inputField,helpText){
if (!validateNonEmpty(inputField,helpText))
return false;
return validateRegEX(/^(\\d{2|\\d{4}})\\/\\d{2}\\/\\d{2}$/, inputField.value, helpText, "Please enter a date(for example,2022/01/14).");
}
function validatePhone(inputField, helpText){
if (!validateNonEmpty(inputField,helpText))
return false;
return validateRegEX(/^\\d{3}-\\d{3}-\\d{4}$/, inputField.value, helpText, "Please enter a date(for example,123-456-7890).");
}
function validateEmail(inputField, helpText){
if (!validateNonEmpty(inputField,helpText))
return false;
return validateRegEX(/^[\\w\\.-_\\+]+@[\\w-]+(\\.\\w{2,4})+$/, inputField.value, helpText, "Please enter a date(for example,johndoe@acme.com).");
}
</script>
</head>
<body>
<div class="heading">
<img id="logo" src="logo.png" alt="Bannerocity" />
</div>
<form name="orderform" action="bannerocity.php" method="POST">
<div class="field">
"Enter the banner message: "
<input id="message" name="message" type="text" size="40" onblur="validateLength(1, 5, this, document.getElementById('message_help'));" />
<span id="message_help" class="help"></span>
</div>
<div class="field">
"Enter ZIP code of the location: "
<input id="zipcode" name="zipcode" type="text" size="5" onblur="validateZIPCode(this, document.getElementById('zipcode_help'));"/>
<span id="zipcode_help" class="help"></span>
</div>
<div class="field">
"Enter the date for the message to be shown: "
<input id="date" name="date" type="text" size="32" onblur="validateDate(this, document.getElementById('date_help'));"/>
<span id="date_help" class="help"></span>
</div>
<div class="field">
Enter your name:
<input id="name" name="name" type="text" size="32" onblur="validateNonEmpty(this, document.getElementById('name_help'));"/>
<span id="name_help" class="help"></span>
</div>
<div class="field">
Enter your phone number:
<input id="phone" name="phone" type="text" size="12" onblur="validatePhone(this, document.getElementById('phone_help'));"/>
<span id="phone_help" class="help"></span>
</div>
<div class="field">
"Enter your email address:"
<input id="email" name="email" type="text" size="32" onblur="validateEmail(this, document.getElementById('email_help'));"/>
<span id="email_help" class="help"></span>
</div>
<input type="button" value="Order Banner" onclick="placeOrder(this.form)"/>
</form>
</body>
</body>
</html>