iview form 表单 自定义参数验证

由于公司项目快速开发需求,需要使用到iview组件库的Form组件,但是默认的表单验证不太能够满足相对复杂一些的验证需求,然后只能求助官方文档(太杂了,没看看明白)和度娘(度娘简单粗暴,再不行谷歌)。
自定义的表单验证如下,没什么太需要注意的,只要用过iview的应该能看明白,直接贴代码:

<FormItem label="分类:" prop="MenuClassifyId">
            <Select v-model="formItem.MenuClassifyId">
             <Option :value="11">1111</Option>

            <Option :value="22">222</Option>
            </Select>
</FormItem

在vue中data(){}写验证函数。官网有案例:https://www.iviewui.com/components/form

export default {
    data () {
    var that=this
        const validateMenuClassifyId = (rule, value, callback) => {
         console.log("单个表单验证")
           console.log(value) //value是对应的ormItem.MenuClassifyId值
                if (value === ''||value ===0) {     //写逻辑从而达到验证值
                    callback(new Error('请选择分类!'));   //callback()暂时理解为回调,验证后回调给界面的信息
                } else {
                    callback();   //默认回调,没有异常值
                }
            };

在form中的验证调用2的函数。

MenuClassifyId:[

                        //required显示*号,validator验证回到的函数,validateMenuClassifyId自定义验证函数,

                   //trigger暂时理解为验证值是否为空                

   { required: true,validator: validateMenuClassifyId, trigger: 'blur' }
                    ],
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iview form表单通过校验规则来确保用户输入数据的合法性。但是有时候我们需要移除某些校验规则来满足特定需求。 iview form表单提供了两种方法来移除校验规则,分别是通过表单ref属性和通过字段的prop属性。 通过表单ref属性移除校验规则,需要先获取表单对象,然后调用$refs.formName.removeRule()方法。其中,formName为表单的ref属性值,removeRule()方法中传入的参数为需要移除校验规则的字段的prop属性值。 实例如下: ```html <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属性移除校验规则,只需要在校验规则中将该字段的校验规则设置为一个空数组即可。 实例如下: ```html <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> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值