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（参考资料）

Html 5 网络存储之 LocalStorage，SessionStorage，Cookie_html localstorage-CSDN博客