iview form 表单移除校验效果

iview form表单通过校验规则来确保用户输入数据的合法性。但是有时候我们需要移除某些校验规则来满足特定需求。

iview form表单提供了两种方法来移除校验规则，分别是通过表单ref属性和通过字段的prop属性。

通过表单ref属性移除校验规则，需要先获取表单对象，然后调用$refs.formName.removeRule()方法。其中，formName为表单的ref属性值，removeRule()方法中传入的参数为需要移除校验规则的字段的prop属性值。

实例如下：

<template>
  <Form :model="form" :rules="rules" ref="form">
    <FormItem label="姓名" prop="name">
      <Input v-model="form.name" />
    </FormItem>
    <FormItem label="手机号" prop="phone">
      <Input v-model="form.phone" />
    </FormItem>
    <FormItem>
      <Button @click="removePhoneRule">移除手机号校验</Button>
    </FormItem>
  </Form>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          phone: ''
        },
        rules: {
          name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
          phone: [{required: true, message: '请输入手机号', trigger: 'blur'}, {pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}]
        }
      }
    },
    methods: {
      removePhoneRule() {
        this.$refs.form.removeRule('phone');
      }
    }
  }
</script>

通过字段的prop属性移除校验规则，只需要在校验规则中将该字段的校验规则设置为一个空数组即可。

实例如下：

<template>
  <Form :model="form" :rules="rules">
    <FormItem label="姓名" prop="name">
      <Input v-model="form.name" />
    </FormItem>
    <FormItem label="手机号" prop="phone">
      <Input v-model="form.phone" />
    </FormItem>
    <FormItem>
      <Button @click="removePhoneRule">移除手机号校验</Button>
    </FormItem>
  </Form>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          phone: ''
        },
        rules: {
          name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
          phone: [{required: true, message: '请输入手机号', trigger: 'blur'}, {pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}]
        }
      }
    },
    methods: {
      removePhoneRule() {
        this.rules.phone = [];
      }
    }
  }
</script>