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"}            ]        }    } } 

在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' }          ]           ......        }

表明要使用验证器的类型，类似数据格式检验，其中还有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]+$/} 

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

pattern

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

min/max

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

len

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

 roles: {     type: "array", required: true, len: 11 }

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

 role: {type: "enum", enum: ['admin', 'user', 'guest']}

未通过校验的提示信息：

  {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>                <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('上传出错')     },