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 function 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> <p slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且文件不超过10MB，最多1个</p> </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('上传出错') },