、为什么需要表单验证？

表单是Web开发中常用的交互元素，用户通过表单提交数据给后端进行处理。然而，用户输入的数据不可靠，因此需要进行表单验证，确保用户输入的数据符合预期。

二、基本的表单验证规则

必填字段：确保用户填写了必填字段，如用户名、密码等。

格式验证：验证用户输入的数据格式是否正确，如邮箱、手机号、日期等。

长度验证：验证用户输入的数据长度是否符合要求，如密码长度、字符数等。

数字范围验证：验证用户输入的数字是否在指定范围内，如年龄、价格等。

一致性验证：验证两个或多个输入字段的值是否一致，如密码确认、邮箱确认等。

三、使用JavaScript进行表单验证的步骤

1、获取表单元素：

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

2、监听表单提交事件：

form.addEventListener('submit', function(event) {
 event.preventDefault(); // 阻止表单的默认提交行为
 // 表单验证逻辑
});

3、编写验证函数：

function validateForm() {
 // 获取表单字段的值
 const username=document.getElementById('username').value;
 const email=document.getElementById('email').value;
 // 必填字段验证
 if (username==='' || email==='') {
 alert('用户名和邮箱不能为空！');
 return false;
 }
 // 邮箱格式验证
 const emailRegex=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
 if (!emailRegex.test(email)) {
 alert('请输入正确的邮箱格式！');
 return false;
 }
 // 其他验证逻辑...
 return true; // 表单验证通过
}

4、表单验证：

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

5、错误提示：

<form id="myForm">
  <label for="username">用户名：</label>
  <input type="text" id="username" required>
  <br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" required>
  <br>
  <button type="submit">提交</button>
</form>

在以上示例中，我们通过JavaScript实现了对用户名和邮箱字段的表单验证。在提交表单时，会先调用validateForm函数进行验证，如果验证通过则提交表单，否则提示错误信息。

四、常用的表单验证技巧

使用正则表达式进行格式验证，如邮箱、手机号等。

使用HTML5表单验证属性，如required、pattern、min、max等。

使用第三方表单验证插件，如jQuery Validation等，简化表单验证的编写。

五、表单验证的优化与提升

实时验证：使用input或change事件实时验证用户输入，及时提醒用户输入错误。

提示友好：使用合适的提示方式，如文字提示、图标提示等，让用户易于理解和操作。

全局验证：在表单提交之前对整个表单进行验证，确保所有字段的正确性。

客户端与服务器端验证：前端表单验证只是为了提高用户体验和减少无效请求，真正的安全性还需要服务器端验证。

通过以上步骤和技巧，你可以使用JavaScript轻松实现表单验证，为用户提供安全智能的交互体验！不仅能提高用户满意度，也能让你在前端开发领域脱颖而出！快来学习吧！

六、总结

表单验证在Web开发中扮演着重要的角色，通过JavaScript的灵活运用，可以实现各种表单验证需求。合理的表单验证不仅能提升用户体验，还能保障数据的准确性和安全性。希望本文能够帮助你掌握JavaScript表单验证的基本技巧和优化方法，打造安全智能的用户交互体验！

是一个注册需求，要求用户在注册的时候需要填写注册信息并上传“营业执照”等信息。表单内容需进行验证及必填项提示，图片需要和信息一起传递且图片载入后需可预览。既然是注册我们当然是用form表单来提交了，对应的ElementUI组件标签则是el-form。

表单数据

从上面的图可以看出注册环节分为了两部分数据，左边是注册时需求提交的表单信息，右边是需求上传的图片。先来解决左边的表单数据，el-form是ElementUI封装的表单组件，可以收集、校验和提交数据。el-form中的model用来绑定表单数据对象，el-form-item中的prop为model对象中传递的字段，el-input中的v-model绑定的是该字段对应的属性值。

el-upload组件

input的name属性是用来定义input元素的名称，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。input的value属性的type属性来决定，type属性属性可以是button、reset、submit、text、password、hidden、checkbox、radio、image、file等。el-upload组件就是封装的type属性为file的input，并提供了before-upload、on-progress、on-success、on-error、on-preview、on-remove等钩子函数来获取上传过程中的属性状态等信息。

表单验证

ElementUI提供了表单验证的规则，可以通过rules属性来定义对应el-form-item中的验证规则（支持多个规则验证）。当然如果觉得ElementUI提供的表单验证功能无法满足项目需求我们也可以自定义验证规则。通过validator属性调用自定义的校验方法，自定义校验callback必须被调用。自定义校验规则可以参考文章【Vue实战084：自定义表单校验规则及常用表单校验分享 】，我将一些常用的校验都写在了一起方便后续直接使用。

文件上传HTML构建

ElementUI提供了一个封装好的<input type='file'>的上传组件el-upload，封装了文件上传的一系列钩子函数，可以监听文件上传过程中的所有事件。el-upload连请求也封装了，只要通过action提供请求路径（后端文件的上传地址）就可以将文件直接上传到服务器。

文件上传样式设计

根据自己的需求设计一个文件样式，这里我用虚拟边框来显示文件上传区域。中间放个图标来触发input选框，图片文件上传后就可以直接在当前区域进行预览。

阻止自动上传并获取文件

在el-upload中定义属性:auto-upload="false" 可以禁止文件自动上传，既然禁止了自动上传那么我们就需要拿到文件对象。通过upload组件的on-change属性我们可以监听文件添加、上传时的状态改变，利用该属性触发自定义事件可以获取到需要的文件属性。利用window.createObjectURL(e.raw)创建图片地址实现本地预览，如果fileList长度大于0说明已经上传了图片这时我们就通过clearValidate去掉校验提示。

表单和图片上传

有文件的form表单上传数据要用formData类型，我们需要创建一个 FormData 对象来接收文件数据。选择了图片并填写必填信息之后点击【注册】按钮发起注册请求，在register 方法里把表单信息通过append将数据添加到formData中。然后利用axios向后台发起注册请求并发送注册信息，res为返回的请求结果。

总结：

这里主要是多了图片的手动上传，el-upload组件默认会自动上传提交的文件。这里要求图片不允许自动上传，需要和信息一起在提交的时候进行传递。以上内容是小编给大家分享的【Vue实战085：el-form实现表单和图片手动上传和校验】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：

为了方便学习，下面附上本文用到的源码：