赞
踩
依旧是公司里那个Vue+Element UI的项目。今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示。放图:
大概就是这个样子。由后台返回的“发放方式”的数值,控制下面几个input框是否显示。这个实现比较简单,只需要把下面几个框用一个<dev>包裹起来,加上一个v-show=""的判断条件即可,但它们的表单验证让我为难了,因为只看Element UI官网给的方法来看,:rules="rules"只在data下面绑定了一个rules对象,可我这明显需要两套,即如果发放方式为"平台代发"时,只验证一个"发放方式"否则则全部验证。
花了一点时间摸索,我想:如果不像官方给的那样,rules="rules",然后在data下设置rules的值,而是把rules绑定一个函数,这个函数在computed计算属性中,根据不同的条件设置不同的验证方法不就可以了?自己尝试了一下,真的成功了,代码如下:
- <el-form class="dialog-body" :rules="rulesList" :model="temp">
- <!--这里为表单内容-->
- </el-form>
-
- <script>
- export default {
- data() {
- return {
- rules: {
- pay_type: [
- { required: true, message: '不能为空', trigger: 'change' }
- ],
- accno: [
- { required: true, message: '不能为空', trigger: 'blur' }
- ],
- accname: [
- { required: true, message: '不能为空', trigger: 'blur' }
- ],
- otp: [
- { required: true, message: '不能为空', trigger: 'blur' }
- ],
- username: [
- { required: true, message: '不能为空', trigger: 'change' }
- ],
- otp_id: [
- { required: true, message: '不能为空', trigger: 'change' }
- ]
- },
- rules2: {
- pay_type: [
- { required: true, message: '不能为空', trigger: 'change' }
- ]
- },
- }
- },
- computed: {
- rulesList: function() {
- if (this.temp.pay_type) {
- return this.rules
- } else {
- return this.rules2
- }
- }
- },
这样就实现了对一个表单进行两套或以上的验证。
另外一种场景是,给某一个字段添加多条验证规则。由于rules接收的是一个数组,我们在数组中再添加一项即可。
比如下面的例子,我又在后面添加了一条自定义的规则
- data() {
- const validatePass = (rule, value, callback) => {
- if (this.option) {
- callback(new Error('请选择列表中已有的选项'))
- } else {
- callback()
- }
- }
- return {
- rules: {
- firstContract: [
- { required: true, message: '不能为空', trigger: ['blur', 'change'] },
- { required: true, trigger: 'blur', validator: validatePass }
- ],
- }
- }
- }
自定义规则中,validator接受的是我自定义的一套规则validatePass,Error为接受的错误提示。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。