### JavaScript 表单验证
#### 1. 创建新的表单
在HTML中，表单是通过`<form>`标签创建的。一个基本的表单结构包括以下属性：
- **ID**: 用于唯一标识表单，不可重复。
- **Name**: 可以重复，通常用于服务器端识别。
- **Method**: 规定了如何发送表单数据，常见的方法有`POST`和`GET`。
- `POST`: 提交的数据不会显示在URL中，适合发送敏感数据。
- `GET`: 数据附加在URL后面，适合非敏感数据传输。
- **Action**: 指定处理表单数据的服务器端程序路径。
示例代码：
```html
<form id="myForm" name="form1" method="post" action="/submit.php">
<!-- 表单元素 -->
</form>
```
#### 2. 表单的作用
表单的主要作用是从客户端收集用户输入的信息并将其发送到服务器端进行处理。例如，在线注册、登录等功能都需要使用表单来实现。
#### 3. 动作属性
- **Action**: 当用户提交表单时，数据将被发送到该属性指定的URL或脚本。
- **确认按钮**: 用户单击此按钮后，表单数据会被发送到服务器。
### JavaScript 对 Window 的操作
#### 1. Window 对象
**Window**对象代表浏览器窗口，它是全局对象，在任何浏览器环境中都可用。所有全局变量和函数都是Window对象的属性和方法。
- **全局变量**: 作为Window对象的属性。
- **全局函数**: 作为Window对象的方法。
#### 2. 使用弹出框
JavaScript提供了一些内置的弹出框方法，用于与用户交互：
- **Confirm (确认框)**: 显示一个包含确认或取消按钮的对话框。如果用户点击确认，返回true；否则返回false。
```javascript
function tijiao() {
var zhi = confirm("是否提交");
if (zhi) {
return true;
} else {
return false;
}
}
```
- **Prompt (提示框)**: 显示一个可以输入的对话框。用户可以在框内输入文本。
```javascript
function tijiao() {
var zhi = prompt("是否提交");
// 进行其他处理...
}
```
- **Alert (警告框)**: 显示一个带有消息和确定按钮的对话框。
```javascript
function y() {
var yx = new RegExp(/^[0-9|A-z|_]{1,17}@[A-z|0-9]{1,5}\.(com|cn|net|org|cc)$/);
var shuru = document.getElementById("youxiang").value;
if (yx.test(shuru)) {
alert("正确");
} else {
alert("错误");
}
}
```
#### 3. Timing 计时方法
- **setTimeout**: 在指定的时间后执行代码。
```javascript
setTimeout(function() {
console.log('Hello');
}, 1000);
```
使用递归可以实现周期性执行：
```javascript
(function loop() {
console.log('Hello');
setTimeout(loop, 1000);
})();
```
- **clearTimeout**: 取消由`setTimeout`设置的延时。
```javascript
var timeoutId = setTimeout(function() {
console.log('Hello');
}, 1000);
clearTimeout(timeoutId);
```
### 补充知识点
除了以上介绍的基本内容外，还可以深入了解以下方面：
- **表单验证库**: 如Parsley.js等，它们提供了丰富的表单验证功能。
- **正则表达式**: 在验证特定格式的数据（如电子邮件地址、电话号码等）时非常有用。
- **事件监听**: 通过监听特定事件（如提交表单）来执行相应的验证逻辑。
- **异步请求**: 使用AJAX技术进行后台数据校验，提高用户体验。
### 结论
JavaScript在Web开发中扮演着重要的角色，特别是在处理用户交互和表单验证方面。掌握上述基本概念和技术，可以帮助开发者构建更加强大和安全的Web应用程序。
