Chapter3—动态样式变化和更灵活的判断机制

• 注册页面效果浏览：点我跳转
• H5中新增的三个元素：<header><main><footer>
• forEach的使用方法

任何数组都可以使用forEach方法，但需要传递一个函数作为参数，这个函数被称为回调函数。

格式如下：

forEach(function(当前元素,当前索引,整个数组){
console.log(cur,idx,arr);
});

演示效果图：

当使用 `forEach` 方法时，function 回调函数可以接受三个参数：第一个参数是当前遍历的数组元素 第二个参数是该元素在数组中的索引 第三个参数是整个数组本身你可以根据需要选择使用哪些参数。

• 应用：让文本框中显示提示文字

现有4个文本框，分别为用户名、密码、确认密码、电子邮箱，通过调用js中的forEach方法来为它们创建提示文字：

以下是创建四个文本框的代码：

<main>
<p>
<label for="user-name" class="mid">用户名</label>
<input type="text" id="user-name" name="user_name" class="mid" autofocus>
<span></span>
</p>
<p>
<label for="pwd" class="mid">密码</label>
<input type="password" id="pwd" name="pwd" class="mid">
<span></span>
</p>
<p>
<label for="pwd-confirm" class="mid">确认密码</label>
<input type="password" id="pwd-confirm" name="pwd_confirm" class="mid">
<span></span>
</p>
<p>
<label for="email" class="mid">电子邮箱</label>
<input type="email" id="email" name="email" class="mid">
<span></span>
</p>
</main>

首先，我们需要通过对四个文本框的name属性进行设置，这样我们就可以在JavaScript中通过form属性来捕获这些文本框。之后，通过捕获这些文本框，我们可以使用forEach和switch语句来实现对文本框提示文字的填充。

以下是JavaScript脚本：

<script type="text/javascript">
let form = document.forms["register_form"];
let user_name_field = form["user_name"];
let pwd_field = form["pwd"];
let pwd_confirm_field = form["pwd_confirm"];
let email_field = form["email"];
 
let pattern = /^\w{6,10}$/;
let email_pattern = /^\w{6,12}@\w{6,10}(.\w{6,10}){1,3}$/;
 
let required_fields = [user_name_field, pwd_field, pwd_confirm_field, email_field];
required_fields.forEach(function (filed, idx) {
switch (idx) {
default:
filed.title = filed.placeholder = "6-10个字母数字的组合";
break;
case 3:
filed.title = filed.placeholder = "___@___.___";
break;
 
}
})
</script>

在上述代码中，第2行的作用是捕获整个表单，随后的3-6行是通过form属性来捕获每个文本框。随后的8-9行使用正则表达式对输入的内容进行约束。12-22行则通过调用forEach方法利用文本框的索引对文本框进行文字提示。

• target

为了给用户更好的体验，在单击文本框会自动选择用户已经输入的文字，从而更方便用户进行操作，这样会提升用户的体验感。

target 属性规定哪个 DOM 元素触发了该事件。

这里我们通过event.target.select(); 来对已经输入的内容进行“全选”操作。

filed.addEventListener("focus", (event) => {
event.target.select();
});

对获取焦点事件添加一个监听器，当用户单击文本框时，输入的内容会被全选。

• 利用classList方法对文本框进行动态样式操作

function valid(event) {
let target = event.target;
let value = target.value;
let pat=target===email_field?email_pattern:pattern;   //见上学期笔记中的条件运算符
if(value.length===0){           //当用户未对文本框进行操作，跳出判断
return;
}
if(!pat.test(value)){
target.classList.add("invalid");
target.nextElementSibling.innerHTML="❌";
}else{
target.classList.remove("invalid");
target.nextElementSibling.innerHTML="✔";
}
};
});

当文本框的内容与预期的条件格式不匹配时，使用 `classList` 方法添加 "invalid" 样式。值得注意的是，第5-7行的 `if` 语句判断用户是否对文本框进行了操作（已进行注释说明）。如果文本框未被操作，则不会进行对错判断，这是非常重要的。

以下是invalid样式的css代码（加在head中）。

<style type=text/css>
.invalid {
background: #FFD4D4;        //此处为浅红色，用于设置错误的文本框背景
}
</style>

• reset按钮和reset事件

当点击reset类型的按钮时，会触发表单的reset事件。

xxx[属性=属性值] 被叫做 属性选择符

prventDefault();方法通常用于阻止事件的默认行为

form.addEventListener("reset", (event) => {
let choice = confirm("你确认要重置吗？");
if (choice === false) {
event.preventDefault();
}
});

我们使用弹出确认框（confirm）来提示用户是否重置，以避免用户误操作。

• select、fieldset和legend标签

<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

<section> 标签是 HTML5 中的新标签。

<fieldset>
<legend>表单组标题</legend>
......
</fieldset>

<fieldset>标签没有必需的或唯一的属性。legend元素为fieldset元素定义标题。

属性：align，值可为top、bottom、left、right。

• Html 5 网络存储之 LocalStorage、SessionStorage（参考资料）

https://blog.csdn.net/wangmx1993328/article/details/80810413/