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