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

2023年11月16日 183点热度 0人点赞 0条评论

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

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

格式如下：

[qzdypre]

forEach(function(当前元素,当前索引,整个数组){

console.log(cur,idx,arr);

});

[/qzdypre]

演示效果图：

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

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

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

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

[qzdypre]

<main>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</main>

[/qzdypre]

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

以下是JavaScript脚本：

[qzdypre]

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>

[/qzdypre]

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

target

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

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

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

[qzdypre]

filed.addEventListener("focus", (event) => {

event.target.select();

});

[/qzdypre]

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

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

[qzdypre]

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="✔";

}

};

});

[/qzdypre]

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

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

[qzdypre]

.invalid {

background: #FFD4D4; //此处为浅红色，用于设置错误的文本框背景

}

</style>

[/qzdypre]

reset按钮和reset事件

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

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

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

[qzdypre]

form.addEventListener("reset", (event) => {

let choice = confirm("你确认要重置吗？");

if (choice === false) {

event.preventDefault();

}

});

[/qzdypre]

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

select、fieldset和legend标签

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

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

[qzdypre]

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

......

</fieldset>

[/qzdypre]

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

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

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

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

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

文章评论