devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

element-ui Form表单验证_element form表单验证

作者：羊村懒王 | 2024-05-22 08:43:25

赞

踩

element form表单验证

element-ui Form表单验证规则全解

element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索,自己经过数次爬坑

之后,总结了几种form表单的验证规则,为了便于阅读,验证规则是拆分的,完整的代码放在文末

1. 普通输入验证

复制代码

  1. <el-form-item label="活动名称" prop="name">
  2.     <!-- validate-event属性的作用是: 输入时不触发表单验证.提交时再验证,你也可以设置成动态验证 -->
  3.     <el-input v-model="registData.name" :validate-event="false"></el-input>
  4.   </el-form-item>
  5.  
  6.   rules: { // 表单验证规则
  7.     name: [
  8.       { required: true, message: '请输入活动名称' }, // 'blur'是鼠标失去焦点的时候会触发验证
  9.       { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
  10.     ]
  11.   }

复制代码

2. 数字类型验证

复制代码

  1. <el-form-item label="区域面积" prop="area">
  2.     <!-- 输入的类型为Number时,需要加一个数字转换的修饰符,输入框默认的类型是String类型,但是我试了一下,发现并不能做验证,所以自己写了函数方法验证 -->
  3.     <!-- <el-input v-model.number="registData.area" autocomplete="off"></el-input> -->
  4.     <!-- keyup是鼠标弹起事件, autocomplete是input自带的原生属性,自动补全功能,on为开启,off为关闭 -->
  5.     <el-input v-model="registData.area" @keyup.native="InputNumber('area')" autocomplete="off"></el-input>
  6.   </el-form-item>
  7.  
  8.   area: [
  9.       // 数字类型 'number', 整数: 'integer', 浮点数: 'float'
  10.       // {type: 'number', message: '请输入数字类型', trigger: 'blur'},
  11.       // {type: 'integer', message: '请输入数字类型', trigger: 'change'}, // 'change'是表单的值改变的时候会触发验证
  12.       {required: true, message: '请输入区域面积', trigger: 'blur'}
  13.     ],
  14.  
  15.     // 自己写的正则验证,限制用户输入数字以外的字符
  16.     // 过滤输入的金额
  17.     InputNumber (property) {
  18.       this.registData[property] = this.limitInputPointNumber(this.registData[property])
  19.     },
  20.  
  21.     // 验证只能输入数字
  22.     limitInputNumber (val) {
  23.       if (val) {
  24.         return String(val).replace(/\D/g, '')
  25.       }
  26.       return val
  27.     },
  28.  
  29.     // 限制只能输入数字(可以输入两位小数)
  30.     limitInputPointNumber (val) {
  31.       if (val === 0 || val === '0' || val === '') {
  32.         return ''
  33.       } else {
  34.         let value = null
  35.         value = String(val).replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
  36.         value = value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
  37.         value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
  38.         value = value.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
  39.         return Number(value)
  40.       }
  41.     },

复制代码

3.1 嵌套验证(独立验证)

这种情况是一行里有多个输入框或选择的情况,这里有两种方法,第一种是el-form嵌套写法,验证是独立的

复制代码

  1. <el-form-item label="活动时间" required>
  2.     <el-col :span="11">
  3.       <el-form-item prop="date1">
  4.         <el-date-picker type="date" placeholder="选择日期" v-model="registData.date1" style="width: 100%;"></el-date-picker>
  5.       </el-form-item>
  6.     </el-col>
  7.     <el-col class="line" :span="2">-</el-col>
  8.     <el-col :span="11">
  9.       <el-form-item prop="date2">
  10.         <el-time-picker type="fixed-time" placeholder="选择时间" v-model="registData.date2" style="width: 100%;"></el-time-picker>
  11.       </el-form-item>
  12.     </el-col>
  13.   </el-form-item>
  14.  
  15.   date1: [
  16.     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
  17.   ],
  18.   date2: [
  19.     { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
  20.   ],

复制代码

3.2 嵌套验证(联动验证)

这种是联动验证,适用省级联动场景,先选国家后触发城市验证

 

复制代码

  1. <!-- region是一个对象,国家和城市是它的属性 -->
  2.   <el-form-item label="活动区域" prop="region">
  3.     <el-select v-model="registData.region.country" placeholder="请选择国家">
  4.       <el-option label="国家一" value="USA"></el-option>
  5.       <el-option label="国家二" value="China"></el-option>
  6.     </el-select>
  7.     <el-select v-model="registData.region.city" placeholder="请选择城市">
  8.       <el-option label="城市一" value="shanghai"></el-option>
  9.       <el-option label="城市二" value="beijing"></el-option>
  10.     </el-select>
  11.   </el-form-item>
  12.  
  13.   region: [
  14.     {
  15.       type: 'object',
  16.       required: true,
  17.       // 这里有两种处理,一种是自定义验证,拿到值后自己对属性进行验证,比较麻烦
  18.       // validator: (rule, value, callback) => {
  19.       //   console.log(55, value)
  20.       //   if (!value.country) {
  21.       //     callback(new Error('请选择国家'))
  22.       //   } else if (!value.city) {
  23.       //     callback(new Error('请选择城市'))
  24.       //   } else {
  25.       //     callback()
  26.       //   }
  27.       // },
  28.       trigger: 'change',
  29.       // 官网提供了对象的嵌套验证,只需要把需要验证的属性,放在fields对象里,就会按顺序进行验证
  30.       fields: {
  31.         country: {required: true, message: '请选择国家', trigger: 'blur'},
  32.         city: {required: true, message: '请选择城市', trigger: 'blur'}
  33.       }
  34.     }
  35.   ],

复制代码

4. 图片上传验证(手动触发部分验证方法)

有时候会需要在表单里上传图片,但是图片上传是一个异步过程,属性值改变后不会去触发验证规则

复制代码

  1. <el-form-item label="活动图片" prop="fileUrl">
  2.     <el-upload
  3.       :action="action"
  4.       :on-success="handleSuccess"
  5.       :data="uploadData"
  6.       :limit="20"
  7.       list-type="picture-card"
  8.       :on-preview="handlePreview"
  9.       :on-remove="handleRemove">
  10.       <i class="el-icon-plus"></i>
  11.     </el-upload>
  12.   </el-form-item>
  13.  
  14.   fileUrl: [
  15.     { required: true, message: '请上传图片', trigger: 'change' }
  16.   ],
  17.  
  18.   // 删除图片
  19.   handleRemove (file, fileList) {
  20.     this.registData.fileUrl = ''
  21.     // 文件删除后也要触发验证,validateField是触发部分验证的方法,参数是prop设置的值
  22.     this.$refs.registerRef.validateField('fileUrl')
  23.   },
  24.  
  25.   // 图片上传
  26.   handleSuccess (res, file, fileList) {
  27.     // 这里可以写文件上传成功后的处理,但是一定要记得给fileUrl赋值
  28.     this.registData.fileUrl = 'fileUrl'
  29.     // 文件上传后不会触发form表单的验证,要手动添加验证
  30.     this.$refs.registerRef.validateField('fileUrl')
  31.   },

复制代码

完整的代码

复制代码

  1. <template>
  2.   <div>
  3.     <p>shopInfo</p>
  4.     <div class="company" id="company">
  5.       <!-- model是验证的数据来源 -->
  6.       <el-form :model="registData" :rules="rules" ref="registerRef" label-width="100px" class="demo-ruleForm">
  7.         <el-form-item label="活动名称" prop="name">
  8.           <!-- validate-event输入时不触发表单验证,提交时再验证,也可以设置成动态验证 -->
  9.           <el-input v-model="registData.name" :validate-event="false"></el-input>
  10.         </el-form-item>
  11.         <el-form-item label="区域面积" prop="area">
  12.           <!-- 输入的类型为Number时,需要加一个数字转换的修饰符,输入框默认的类型是String类型,但是我试了一下,发现并不能做验证,所以自己写了函数方法验证 -->
  13.           <!-- <el-input v-model.number="registData.area" autocomplete="off"></el-input> -->
  14.           <el-input v-model="registData.area" @keyup.native="InputNumber('area')" autocomplete="off"></el-input>
  15.         </el-form-item>
  16.         <el-form-item label="活动区域" prop="region">
  17.           <el-select v-model="registData.region.country" placeholder="请选择国家">
  18.             <el-option label="国家一" value="USA"></el-option>
  19.             <el-option label="国家二" value="China"></el-option>
  20.           </el-select>
  21.           <el-select v-model="registData.region.city" placeholder="请选择城市">
  22.             <el-option label="城市一" value="shanghai"></el-option>
  23.             <el-option label="城市二" value="beijing"></el-option>
  24.           </el-select>
  25.         </el-form-item>
  26.         <el-form-item label="活动时间" required>
  27.           <el-col :span="11">
  28.             <el-form-item prop="date1">
  29.               <el-date-picker type="date" placeholder="选择日期" v-model="registData.date1" style="width: 100%;"></el-date-picker>
  30.             </el-form-item>
  31.           </el-col>
  32.           <el-col class="line" :span="2">-</el-col>
  33.           <el-col :span="11">
  34.             <el-form-item prop="date2">
  35.               <el-time-picker type="fixed-time" placeholder="选择时间" v-model="registData.date2" style="width: 100%;"></el-time-picker>
  36.             </el-form-item>
  37.           </el-col>
  38.         </el-form-item>
  39.         <el-form-item label="即时配送" prop="delivery">
  40.           <el-switch v-model="registData.delivery"></el-switch>
  41.         </el-form-item>
  42.         <el-form-item label="活动性质" prop="type">
  43.           <el-checkbox-group v-model="registData.type">
  44.             <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
  45.             <el-checkbox label="地推活动" name="type"></el-checkbox>
  46.             <el-checkbox label="线下主题活动" name="type"></el-checkbox>
  47.             <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
  48.           </el-checkbox-group>
  49.         </el-form-item>
  50.         <el-form-item label="特殊资源" prop="resource">
  51.           <el-radio-group v-model="registData.resource">
  52.             <el-radio label="线上品牌商赞助"></el-radio>
  53.             <el-radio label="线下场地免费"></el-radio>
  54.           </el-radio-group>
  55.         </el-form-item>
  56.         <el-form-item label="活动图片" prop="fileUrl">
  57.           <el-upload
  58.             :action="action"
  59.             :on-success="handleSuccess"
  60.             :data="uploadData"
  61.             :limit="20"
  62.             list-type="picture-card"
  63.             :on-preview="handlePreview"
  64.             :on-remove="handleRemove">
  65.             <i class="el-icon-plus"></i>
  66.           </el-upload>
  67.         </el-form-item>
  68.         <el-form-item label="活动形式" prop="desc">
  69.           <el-input type="textarea" v-model="registData.desc"></el-input>
  70.         </el-form-item>
  71.         <el-form-item>
  72.           <!-- 提交的时候传入的是表单的ref -->
  73.           <el-button type="primary" @click="submitForm('registerRef')">立即创建</el-button>
  74.           <el-button @click="resetForm('registerRef')">重置</el-button>
  75.         </el-form-item>
  76.       </el-form>
  77.     </div>
  78.   </div>
  79. </template>
  80. <style scoped>
  81.   .company {
  82.     padding: 30px;
  83.     text-align: left;
  84.     width: 600px;
  85.   }
  86. </style>
  87. <script>
  88. export default {
  89.   name: 'shopInfo',
  90.  
  91.   data () {
  92.     return {
  93.       registData: {
  94.         name: '', // 名称
  95.         area: '', // 面积
  96.         region: {}, // 地区
  97.         date1: '', // 日期
  98.         date2: '', // 时间
  99.         delivery: false, // 即时配送
  100.         type: [], // 活动性质
  101.         resource: '', // 特殊资源
  102.         fileUrl: '', // 活动图片
  103.         desc: '' // 活动形式
  104.       }, // 需要验证的表单属性,必须在data中定义
  105.       rules: { // 表单验证规则
  106.         name: [
  107.           { required: true, message: '请输入活动名称' }, // 'blur'是鼠标失去焦点的时候会触发验证
  108.           { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
  109.         ],
  110.         area: [
  111.           // 数字类型
  112.           // {type: 'number', message: '请输入数字类型', trigger: 'blur'},
  113.           // {type: 'integer', message: '请输入数字类型', trigger: 'change'}, // 'change'是表单的值改变的时候会触发验证
  114.           {required: true, message: '请输入区域面积', trigger: 'blur'}
  115.         ],
  116.         region: [
  117.           {
  118.             type: 'object',
  119.             required: true,
  120.             // validator: (rule, value, callback) => {
  121.             //   console.log(55, value)
  122.             //   if (!value.country) {
  123.             //     callback(new Error('请选择国家'))
  124.             //   } else if (!value.city) {
  125.             //     callback(new Error('请选择城市'))
  126.             //   } else {
  127.             //     callback()
  128.             //   }
  129.             // },
  130.             trigger: 'change',
  131.             fields: {
  132.               country: {required: true, message: '请选择国家', trigger: 'blur'},
  133.               city: {required: true, message: '请选择城市', trigger: 'blur'}
  134.             }
  135.           }
  136.         ],
  137.         date1: [
  138.           { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
  139.         ],
  140.         date2: [
  141.           { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
  142.         ],
  143.         type: [
  144.           { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
  145.         ],
  146.         resource: [
  147.           { required: true, message: '请选择活动资源', trigger: 'change' }
  148.         ],
  149.         fileUrl: [
  150.           { required: true, message: '请上传图片', trigger: 'change' }
  151.         ],
  152.         desc: [
  153.           { required: true, message: '请填写活动形式', trigger: 'blur' }
  154.         ]
  155.       },
  156.       action: `https://jsonplaceholder.typicode.com/posts/`,
  157.       uploadData: {userId: 1304, pathName: 'company'}
  158.     }
  159.   },
  160.  
  161.   created () {
  162.  
  163.   },
  164.  
  165.   methods: {
  166.     // 过滤输入的金额
  167.     InputNumber (property) {
  168.       this.registData[property] = this.limitInputPointNumber(this.registData[property])
  169.     },
  170.  
  171.     // 验证只能输入数字
  172.     limitInputNumber (val) {
  173.       if (val) {
  174.         return String(val).replace(/\D/g, '')
  175.       }
  176.       return val
  177.     },
  178.  
  179.     // 限制只能输入数字(可以输入两位小数)
  180.     limitInputPointNumber (val) {
  181.       if (val === 0 || val === '0' || val === '') {
  182.         return ''
  183.       } else {
  184.         let value = null
  185.         value = String(val).replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
  186.         value = value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
  187.         value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
  188.         value = value.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
  189.         return Number(value)
  190.       }
  191.     },
  192.  
  193.     // 预览图片
  194.     handlePreview (file) {
  195.  
  196.     },
  197.  
  198.     // 删除图片
  199.     handleRemove (file, fileList) {
  200.       this.registData.fileUrl = ''
  201.       // 文件删除后也要触发验证,validateField是触发部分验证的方法,参数是prop设置的值
  202.       this.$refs.registerRef.validateField('fileUrl')
  203.     },
  204.  
  205.     // 图片上传
  206.     handleSuccess (res, file, fileList) {
  207.       // 这里可以写文件上传成功后的处理,但是一定要记得给fileUrl赋值
  208.       this.registData.fileUrl = 'fileUrl'
  209.       // 文件上传后不会触发form表单的验证,要手动添加验证
  210.       this.$refs.registerRef.validateField('fileUrl')
  211.     },
  212.  
  213.     submitForm (formName) {
  214.       console.log(this.registData)
  215.       this.$refs[formName].validate((valid) => {
  216.         if (valid) {
  217.           alert('submit!')
  218.         } else {
  219.           console.log('error submit!!')
  220.           return false
  221.         }
  222.       })
  223.     },
  224.  
  225.     resetForm (formName) {
  226.       this.$refs[formName].resetFields()
  227.     }
  228.   }
  229. }

复制代码

再补充两个错误显示的方法

有时候我们的数据在修改页面中,赋值为空会触发验证错误,这种在一个prop控制多个form-item时会出现.这时候希望页面加载时不验证,在特定时候验证,可以使用error这个属性

error初始值为空时不会展示错误信息,一旦有值就会在页面展示错误信息

复制代码

  1. <el-form-item class="region" label="" :error="nameError">
  2.   <el-input v-model="registData.name" @change="changeName" :validate-event="false"></el-input>
  3. </el-form-item>
  4.  
  5. methods: {
  6.   data: {
  7.     return () {
  8.       nameError: ''
  9.     }
  10.   }
  11.   changeName () {
  12.     // 设置了单独的error时,不会触发el-form的验证,它只根据error是否有值来展示错误
  13.     if (this.registData.name) {
  14.       this.nameError = ''
  15.     } else {
  16.       this.nameError = '请输入名称'
  17.     }
  18.   }
  19. }

复制代码

另一种场景: 自定义错误样式

el-form的错误信息默认是在输入框底部一行展示,如果需要特地的样式,可以使用slot

复制代码

  1. <el-form-item label="" prop="password">
  2.     <el-input v-model="perfectInfo.password" :placeholder="pwdPlaceholder" :maxlength="24" auto-complete="new-password" >
  3.     </el-input>
  4.     <template slot="error" slot-scope="slot">
  5.       <div class="el-form_tip tt">
  6.         <div class="item_tip">{{pwdFormatTips1}}</div>
  7.         <div class="item_tip">{{pwdFormatTips2}}</div>
  8.         <div class="item_tip">{{pwdFormatTips3}}</div>
  9.         <div class="item_tip">{{pwdFormatTips4}}</div>
  10.       </div>
  11.     </template>
  12.   </el-form-item>

转自 https://www.cnblogs.com/steamed-twisted-roll/p/10167501.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/607447
推荐阅读