Vue+ElementUI实现表单验证

前言

为什么要表单验证？

1. 减轻服务器的压力
2. 保证输入的数据符合要求
3. 表单验证是减少后端工作量最好的方式之一，我们可以在前端利用表单验证和正则规范化传给服务端的数据，这样就可以大大减少服务端对数据的过滤

如何使用？

• 第一步：
  首先向大家接单介绍一下如何在你的Vue脚手架环境中使用ElementUI

// 下载：
npm install Element --save
// 引入 main.js 中引入 分为引入JS和css
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

说明：
当然这里作者做了全局的css样式引入，这样的做法可能会被有的同学抵触，什么css文件过大影响性能，但是我还是想说，我们还是要从根本上解决前端性能优化问题，比如可以采用路由懒加载,组件懒加载，如何实现路由/组件懒加载下篇文章我会详细介绍路由懒加载的常用方法

所需技术点

ElementUI表单验证主要使用以下技术点

1. ref
   我们需要同过ref属性获取当前表单的DOM

<el-form :model="ruleForm" :rules="rules" ref="ruleForm"></el-form>

2. rules
   通过rules这个属性绑定我们想要添加的验证

<el-form :model="ruleForm" :rules="rules" ref="ruleForm"></el-form>

3. 通过prop绑定验证规则

<el-form-item label="活动名称" prop="name"></el-form-item> 

4. data中自定义验证规则:规则的名称要和prop绑定的name相同

rules: {
     
name: [
     {
      required: true, message: "请输入姓名", trigger: "blur" }
  ],
},

5. 也可以自定义校验规则

rules:{
     
 checkPass: [
    {
      validator: validatePass2, trigger: 'blur' }
 ],
}
// 这是一个简单的两次密码重复校验的自定函数
var validatePass2 = (rule, value, callback) => {
     
 if (value === '') {
     
     callback(new Error('请再次输入密码'));
   } else if (value !== this.ruleForm.pass) {
     
     callback(new Error('两次输入密码不一致!'));
   } else {
     
    callback();
   }
 };

6. 提交时的校验

<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
// 注意:提交函数必须传递一个参数,这个参数就是整个表单v-model绑定的对象
 submitForm(ruleForm) {
     
    this.$refs[ruleForm].validate((valid) => {
     //通过$refs获取到表单元素
      if (valid) {
     
         alert('submit!');
       } else {
     
         console.log('error submit!!');
         return false;
       }
     });
 }
 // 注意:表单绑定的对象和$ref获取到的对象，对象名必须一致，否则可能会出现有限验证规则不起作用的问题

总结

1. 通过表单验证不但可以较少服务端开发眼里还可以优化前端的用户体验
2. 通过使用ElementUI中的表单验证可以大大减少开发时间，告别之前使用JQuery或者原生开发效率低下