使用原生javascript创建通用表单验证——更锋利的使用dom对象

以下是使用原生JavaScript创建通用表单验证的完整攻略：

使用原生JavaScript创建通用表单验证

1. 获取表单元素

首先，我们需要获取表单元素的引用。可以使用document.getElementById()方法或其他选择器方法来获取表单元素的引用。

示例代码：

javascript
const form = document.getElementById('myForm');

1. 监听表单提交事件

接下来，我们需要监听表单的提交事件，并在提交时执行表单验证的逻辑。可以使用addEventListener()方法来添加事件监听器。

示例代码：

```javascript
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单的默认提交行为

 // 执行表单验证逻辑
 if (validateForm()) {
   form.submit(); // 提交表单
 }

});
```

1. 编写表单验证逻辑

在表单提交事件的处理函数中，我们可以编写表单验证的逻辑。可以使用DOM对象的属性和方法来获取表单字段的值，并进行验证。

示例代码：

```javascript
function validateForm() {
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');

 // 验证姓名字段
 if (nameInput.value.trim() === '') {
   alert('请输入姓名');
   return false;
 }

 // 验证邮箱字段
 const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
 if (!emailRegex.test(emailInput.value)) {
   alert('请输入有效的邮箱地址');
   return false;
 }

 return true; // 表单验证通过

}
```

1. 添加表单字段的验证规则

可以根据需要，为表单字段添加更多的验证规则。例如，可以使用正则表达式、长度限制等方式对字段进行验证。

示例代码：

javascript
// 验证密码字段
const passwordInput = document.getElementById('password');
if (passwordInput.value.length < 6) {
alert('密码长度不能少于6个字符');
return false;
}

1. 显示验证错误信息

在验证不通过时，可以使用alert()、console.log()等方法来显示错误信息。也可以通过动态创建DOM元素来显示错误提示。

示例代码：

javascript
// 显示错误提示
const errorDiv = document.createElement('div');
errorDiv.textContent = '请输入有效的邮箱地址';
errorDiv.classList.add('error-message');
emailInput.parentNode.appendChild(errorDiv);

以上是使用原生JavaScript创建通用表单验证的完整攻略。根据具体需求，您可以根据示例代码进行定制和优化。请注意，这只是一个简单的示例，实际的表单验证可能涉及更复杂的逻辑和验证规则。