vue框架element常用知识点整理

input常规校验

三种常见校验方式：


data中校验

这也是平台默认的验证方式。

<!– 表单 –> <el-form ref=”rulesForm” :rules=”formRules” :model=”rulesForm” label-width=”200px”>     <el-form-item label=”用户名称:” prop=”userName”>        <el-input v-model=”rulesForm.userName” style=”width:300px” maxlength=”50″/>     </el-form-item> </el-form> ……  data() {     return {         // 省略别的数据定义         …                  // 表单验证         formRules: {             userName: [                {required: true,message: “请输入用户名称”,trigger: “blur”}            ]        }    } }

• formRules：与上文 ‘表单内容’ 中 <el-form> 表单的 :rules 属性值相同
• userName：与上文 ‘表单内容’ 中 <el-form-item> 表单子元素的 prop 属性值相同
• 验证内容是：必填，失去焦点时验证，如果为空，提示信息为 ‘请输入用户名称

在data中定义表单验证规则的对象数组rules（可以单独编写验证器函数），并直接绑定到表单标签的rules参数中。其中，validator是单个表单域格式验证的验证器，一般是需要比较复杂的格式验证的时候才会用。如果是非空验证、数据类型验证或者正则表达式能处理的，都可以直接通过rules的type/Pattern等相关参数直接配置就好了。


数组中的单个检验规则对象中包含required/message/trigger/min/max等参数，这些参数配合起来，可以完成我们以往要编写多行代码才能实现的校验功能。官方文档中的介绍太过粗略，下面单独介绍rules的用法，详细校验规则参见
async-validator。

rules: {           name: [            { required: true, message: ‘请输入活动名称’, trigger: ‘blur’ },            { min: 3, max: 5, message: ‘长度在 3 到 5 个字符’, trigger: ‘blur’ }          ],           region: [            { required: true, message: ‘请选择活动区域’, trigger: ‘change’ }          ],           date1: [            { type: ‘date’, required: true, message: ‘请选择日期’, trigger: ‘change’ }          ],           date2: [            { type: ‘date’, required: true, message: ‘请选择时间’, trigger: ‘change’ }          ]           ……        }
type

表明要使用验证器的类型，类似数据格式检验，其中还有email、url、regexp、method等特定格式字段的验证。


比如只需要配置 type:’email’ 的规则就可以验证email了，验证器都已经封装好了这些功能，只需调用就可以了.


可识别的类型：

• string: 字符串类型（默认值）
• number: 数字类型
• boolean:布尔类型
• method: 函数类型
• regexp:正则表达式
• integer: 整型
• float: 双精度浮点型数字
• array: 数组类型
• object: 对象类型
• enum: 枚举值
• date: 日期格式
• url: 网址格式
• hex: 16进制数字
• email: 电子邮箱格式
• any: 任意类型

例子

email = [  {type: “string”,    required: true,    message: ‘请输入邮箱地址’, trigger: ‘blur’},  {type: ’email’,    message: ‘请输入正确的邮箱地址’,trigger: [‘blur’, ‘change’]} ]   {type :”string” , required:true,pattern:/^[a-z]+$/}
required

必填字段，即非空验证。如上面实例中的的非空验证，以及邮箱前边的必填符号*，就是这个参数的功劳。


pattern

正则表达式，如果需要验证手机号码之类的，可以直接写正则表达式配置到校验规则中即可。


min/max

判断数据大小范围，通常对数字大小范围做校验。对于字符串和数组类型，将根据长度进行比较。


len

长度验证，如11位手机号码。

roles: {     type: “array”, required: true, len: 11 }
enum

枚举值验证，示例代码如下

role: {type: “enum”, enum: [‘admin’, ‘user’, ‘guest’]}
messages:

未通过校验的提示信息：

  {name:{type: “string”, required: true, message: “Name is required”}} // 支持html: {name:{type: “string”, required: true, message: “<b>Name is required</b>”}} // 支持vue-i18n: {name:{type: “string”, required: true, message: () => this.$t( ‘name is required’ )}}
行内校验

<!– 表单 –> <el-form ref=”rulesForm” :rules=”formRules” :model=”rulesForm” label-width=”200px”>     <el-form-item label=”银行名称:” prop=”accountName” :rules=”[{required:true,message:’请输入银行名称’,trigger:’blur’}]”>         <el-input v-model=”rulesForm.accountName” style=”width:300px” maxlength=”50″/>     </el-form-item> </el-form>
和第一种方式校验的效果是一样的，只不过写法不一样而已。


自定义校验

这种方式的校验，最为灵活。

<!– 表单 –> <el-form ref=”rulesForm” :rules=”formRules” :model=”rulesForm” label-width=”200px”>     <el-form-item label=”身份证号:” prop=”accountNumber”>        <el-input v-model=”rulesForm.accountNumber” style=”width:300px” maxlength=”19″/>     </el-form-item> </el-form>  <script> // 引入了外部的验证规则 import { validateIdNo } from “@/utils/validate”;    export default {     data() {         return {             // 省略别的数据定义             …                      // 表单验证             formRules: {                 accountNumber: [                    {required: true,validator: validateIdNo,trigger: “blur”}                ]            }        }    } } </script>  ////外部文件  validate.js  /* 身份证号 */ export functiоn validateIdNo(rule, value,callback) {     const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;     if(value==”||value==undefined||value==null){         callback();    }else {         if ((!reg.test(value)) && value != ”) {             callback(new Error(‘请输入正确的身份证号码’));        } else {             callback();        }    } }  
循环中自定义校验，比如项目中字段A和字段B比较大小

///////vue <el-form-item label=”最高限价” :prop=”‘sectionInfoDTOList.’ + idx + ‘.highPrice'” :rules=”[                     // {required: true, message: ‘最高价不能为空’, trigger: ‘blur’},                    {index:idx,validator:validateValue,trigger: ‘blur’}            ]”>               <el-input-number controls-position=”right” :min=”0″ v-model=”dataForm.sectionInfoDTOList[idx].highPrice”                                placeholder=”最高限价” :precision=”2″ :step=”0.1″></el-input-number>             </el-form-item> ////////js  validateValue(rule, value, callback) {       if (!value) {         // return callback(new Error(‘最高限价不能为空’));         callback();      }        if (this.dataForm.sectionInfoDTOList[rule.index].highPrice <this.dataForm.sectionInfoDTOList[rule.index].lowPrice)              {return callback(new Error(‘最高限价不能低于底价’));}       callback();    },
数字

优先使用计数器组件

  <template>   <el-input-number controls-position=”right”  size=”medium” v-model=”num” :min=”0″ :precision=”2″ :step=”0.1″ :max=”10″></el-input-number> </template>
图片上传

项目中图片上传、文件上传默认使用的公共组件是el-upload

  <el-upload :disabled=”dataForm.isView” :action=”url” accept=”image/png,image/jpeg,image/png,image/gif,.pdf”                        :before-upload=”beforeUploadPicture”                         :on-success=”uploadSuccess”                        :on-remove=”handleRemove”                        :limit=”1″                        :on-exceed=”fileExceed”                        :on-preview=’handlePreview’                        :on-error=”uploadError” :file-list=”fileList” :show-file-list=”true”>                <el-button :disabled=”dataForm.isView” size=”small” type=”primary”>点击上传</el-button>                <div slot=”tip” class=”el-upload__tip”>只能上传jpg/png/pdf文件，且文件不超过10MB，最多1个</div>             </el-upload>  /////js import Cookies from ‘js-cookie’  data()  url: `${window.SITE_CONFIG[“apiURL”]}/sys/oss/upload?token=${Cookies.get(         “token”       )}`,      fileList: [],     //上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 beforeUploadPicture(file) {        const isJPG = file.type === ‘image/jpeg’;        const isLt2M = file.size / 1024 / 1024 < 2;          if (!isJPG) {          this.$message.error(‘上传头像图片只能是 JPG 格式!’);         }         if (!isLt2M) {          this.$message.error(‘上传头像图片大小不能超过 2MB!’);         }         return isJPG && isLt2M;       }, // 文件上传成功时的钩子    uploadSuccess (res, file, fileList) {      this.fileList = fileList      this.dataForm.fileBuAddress = file.response.data.src     },    //文件列表移除文件时 handleRemove2 (file, fileList) {      this.fileList = fileList      this.dataForm.fileBuAddress = ”     },    //文件超出个数限制时的钩子 fileExceed(files, fileList){      this.$message.warning(“当前限制文件上传最多1个”)     },    //点击文件列表中已上传的文件时的钩子    handlePreview (item) {      const url = item.url || item.response.data.src      window.open(url)     },    // 上传图片出错    uploadError (e, file, fileList) {      this.$message.error(‘上传出错’)     },