Chapter2——利用form表单实现注册页面

笔记附件：Chapter2-form表单的制作

点击后方网址跳转本文实例：http://ntvu.love:88/chapter2/

• GET和POST的区别？

如果在method中不指定，那么默认值为GET。

GET是数据附加在请求头（url）上，数据量较小，也不如POST安全

POST是数据附加在文本（正文）里，数据量较大，相对于GET较安全

• form表单的创建

<form></form> 是成对标签，需要设置id和name来方便后期捕获表单及其中的数据。method属性分为GET和POST两种方法，如果不去设置，默认为GET。而action属性主要用于指定提交表单数据时处理数据的URL。

如何实现点击文字”用户名“能实现连接到后面的文本框内：

方法1是通过在lable中加上属性for指向连接的组件id

示例代码：

<p><label for="user-name">用户名：</label><input type="text" name="user_id" id="user-name" maxlength="10"></p>

方法2是将lable套在input外

示例代码：

<p><label>用户名：<input type="text" name="user_id" id="user-name" maxlength="10"></label></p>

以上两种方法都可以实现点击文本”用户名“跳转到后面的文本框内。

• 设置文本框

size属性用来设置文本框的宽度（并不代表超过宽度的字符不被接受）

maxlength代表文本框所能接受的最大字符量

一般设置maxlength有相对意义，而size没有意义。

示例代码：这里规定了用户名最大字符量为10，超过10个字符的将不被接受

<p><label>用户名：<input type="text" class="txt" name="user_id" id="user-name" maxlength="10"></label></p>

密码框的设置，要将input中的type设置为”password“，这样在密码框内输入时，输入的内容会被隐藏。

演示如下：

• 设置单选按钮

我们可以通过将`type`属性设置为`radio`来实现单选效果。在单选题中，默认情况下只能选择一个选项。为了在同一组选项中实现单选效果，需要将它们的`name`属性设置为相同的值。

以下内容仅供参考，您可以根据您的需求进行调整优化。 在注册页面，“性别”选项是一个常见的必填项。但通常，这个选项只能选择“男”或“女”，因此我们需要将两个单选按钮的“name”属性值都设置为“gender”（性别），这样才能够实现单选效果。另外需要注意的是，“checked”属性表示默认选中状态，也就是说，如果用户没有手动选择，系统会自动将性别设置为“男”，从而提升了用户体验。

代码如下：

<p>性别：
<label><input type="radio" name="gender" value="male" checked>男</label>
<label><input type="radio" name="gender" value="female">女</label>
</p>

• 设置多选按钮

在HTML中，要将元素类型设置为复选框（checkbox）以实现多选效果，可以将元素类型设置为“checkbox”。为了将选中的值作为同一组试题的答案进行提交，需要将它们的名称（name）属性设置为相同的值。这点和单选的设置类似。要注意文本和value值的联系，value值代表了提交的内容。

以下是一组示例代码：

<p>爱好：
<label><input type="checkbox" name="fav" value="bike">自行车</label>
<label><input type="checkbox" name="fav" value="music">音乐</label>
<label><input type="checkbox" name="fav" value="basketball">篮球</label>
<label><input type="checkbox" name="fav" value="read">读书</label>
</p>

• 设置按钮

在HTML中，若要提交表单上的内容，必须创建一个按钮。创建按钮的方式是将input元素的属性type设置为submit，并将value设置为按钮上显示的文本内容。

需要注意的一点是，当用户点击某个按钮时，会触发浏览器的提交（submit）事件。

以上是一个简易的注册页面代码，我们初步规划了页面的组件，接下来需要对事件进行判断（如密码和确认密码是否相同，对密码的要求（6-10位等））

• 捕获表单的内容

在JavaScript中，若要获取表单的内容，需要先在表单元素中设置name属性。然后可以通过document.forms["form_name"]来访问表单的数据。

当处理表单或表单组件时，需要特别注意，在捕获或识别表单或组件时，我们使用的是其name属性而非id属性。因此，在为name属性命名时，务必规范，通常我们推荐使用驼峰命名法或下划线来分隔单词。

这里我们来捕获表单的内容，示例代码如下：

<script type="text/javascript">
let form = document.forms["register_form"];       //捕获表单
</script>

这里register_form对应了form中的name值

这里要注意的是，必须要先实现对表单的捕获，才能用form命令来捕获表单中的对象

以上是捕获表单的基本方法。

• 捕获表单中的组件内容值

和捕获表单类似的是，也是要通过组件的name值来获取，但是要在获取的后方加上“.value”，即为取得当前组件对应的值。

• 表单中的焦点事件（focus和blur）

焦点事件一般用于文本框上

focus：获取焦点

blur：失去焦点

在这个实例中，我们使用blur事件用来提醒用户的输入错误（例如用户名密码不符合格式，或者密码和确认密码）

<script type="text/javascript">
// let form=document.querySelector('#register-form'); 不推荐的旧方法
let form = document.forms["register_form"];       //捕获表单
let userId = form["user_id"];       //在表单中用的是name不是id
let pwd = form["pwd"];
let pwd2 = form["pwd2"];
//以上三个let负责获取表单中用户输入的值
let pat=/^\w{6,10}$/;    //此处使用了正则表达式
 
 
userId.addEventListener("blur",function (event){
let id=userId.value;
let msg=null;
if(id.length===0){
msg="用户名不能为空!";
}else if (!pat.test(id)){
msg="用户名必须是6-10个字母数字以及下划线的组合!"
}
document.querySelector('#id-msg').innerHTML=msg;
});
 
pwd.addEventListener("blur",function (event){
let _pwd=pwd.value;
let msg=null;
if(_pwd.length===0){
msg="密码不能为空!";
}else if (!pat.test(_pwd)){
msg="密码必须是6-10个字母数字以及下划线的组合!"
}
document.querySelector('#pwd-msg').innerHTML=msg;
});
pwd2.addEventListener("blur",function (event){
let _pwd2=pwd2.value;
let msg=null;
if(_pwd2.length===0){
msg="确认密码不能为空!";
}else if (!pat.test(_pwd2)){
msg="确认密码必须是6-10个字母数字以及下划线的组合!"
}else if(pwd2.value!==pwd.value){
msg="两次密码不一致！请检查！"
}
document.querySelector('#pwd2-msg').innerHTML=msg;
});
</script>

在上面的JS代码中，我们通过三个事件函数来判断输入值是否符合规定格式的值，并使用if-else语句来根据不同的msg设置不同的提醒。 为了自定义提醒的显示位置，可以在原文本框后加上<span></span>标签，用来放置msg提醒。

let pat=/^\w{6,10}$/;    此处使用了正则表达式，对这块不理解的同学可以去参考今天发的正则表达式的相关资料来搞懂。

正则表达式参考链接：http://ntvu.love/?p=52