当前位置:   article > 正文

Vue+Element UI 下,如何给一个表单设置自定义规则或多个验证规则(:rules)_element 表单验证规则写多个规则

element 表单验证规则写多个规则

       依旧是公司里那个Vue+Element UI的项目。今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示。放图:

 

       大概就是这个样子。由后台返回的“发放方式”的数值,控制下面几个input框是否显示。这个实现比较简单,只需要把下面几个框用一个<dev>包裹起来,加上一个v-show=""的判断条件即可,但它们的表单验证让我为难了,因为只看Element UI官网给的方法来看,:rules="rules"只在data下面绑定了一个rules对象,可我这明显需要两套,即如果发放方式为"平台代发"时,只验证一个"发放方式"否则则全部验证。

       花了一点时间摸索,我想:如果不像官方给的那样,rules="rules",然后在data下设置rules的值,而是把rules绑定一个函数,这个函数在computed计算属性中,根据不同的条件设置不同的验证方法不就可以了?自己尝试了一下,真的成功了,代码如下:

  1. <el-form class="dialog-body" :rules="rulesList" :model="temp">
  2. <!--这里为表单内容-->
  3. </el-form>
  4. <script>
  5. export default {
  6. data() {
  7. return {
  8. rules: {
  9. pay_type: [
  10. { required: true, message: '不能为空', trigger: 'change' }
  11. ],
  12. accno: [
  13. { required: true, message: '不能为空', trigger: 'blur' }
  14. ],
  15. accname: [
  16. { required: true, message: '不能为空', trigger: 'blur' }
  17. ],
  18. otp: [
  19. { required: true, message: '不能为空', trigger: 'blur' }
  20. ],
  21. username: [
  22. { required: true, message: '不能为空', trigger: 'change' }
  23. ],
  24. otp_id: [
  25. { required: true, message: '不能为空', trigger: 'change' }
  26. ]
  27. },
  28. rules2: {
  29. pay_type: [
  30. { required: true, message: '不能为空', trigger: 'change' }
  31. ]
  32. },
  33. }
  34. },
  35. computed: {
  36. rulesList: function() {
  37. if (this.temp.pay_type) {
  38. return this.rules
  39. } else {
  40. return this.rules2
  41. }
  42. }
  43. },

    这样就实现了对一个表单进行两套或以上的验证。

    另外一种场景是,给某一个字段添加多条验证规则。由于rules接收的是一个数组,我们在数组中再添加一项即可。

比如下面的例子,我又在后面添加了一条自定义的规则

  1. data() {
  2. const validatePass = (rule, value, callback) => {
  3. if (this.option) {
  4. callback(new Error('请选择列表中已有的选项'))
  5. } else {
  6. callback()
  7. }
  8. }
  9. return {
  10. rules: {
  11. firstContract: [
  12. { required: true, message: '不能为空', trigger: ['blur', 'change'] },
  13. { required: true, trigger: 'blur', validator: validatePass }
  14. ],
  15. }
  16. }
  17. }

    自定义规则中,validator接受的是我自定义的一套规则validatePass,Error为接受的错误提示。

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/607285
推荐阅读
相关标签
  

闽ICP备14008679号