iview-Form表单校验自定义检验规则

最新推荐文章于 2024-06-13 14:23:28 发布

菜鸟也能飞呀飞

最新推荐文章于 2024-06-13 14:23:28 发布

阅读量2.8k

点赞数 2

分类专栏： iview 文章标签： vue.js

本文链接：https://blog.csdn.net/l1830473688/article/details/109571493

版权

iview 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML部分

<Form ref="refForm" :model="formItem" :rules="ruleForm" :label-width="100">
     <FormItem label="提取金额（本人）：" prop="tqjebr">
         <InputNumber type="number" :min="1" :max="99999999" v-model="formItem.tqjebr" :disabled="disBr"></InputNumber>
     </FormItem>
     <FormItem label="提取金额（配偶）：" prop="tqjepo">
         <InputNumber type="number" :min="1" :max="99999999" v-model="formItem.tqjepo" :disabled="disPo"></InputNumber>
     </FormItem>
 </Form>

js部分（重点来了）

1.自定义校验规则

data函数里，return 外，自定义函数并赋予名称

rule，正则表达式
value，当前文本框的值
callback，函数回调

data(){
        //本人提取金额校验
        const brtqjeCheck = async(rule, value, callback) => {
            if(this.formItem.tqjebr > this.jkrye){
                this.yhkkjeShow = false
                return callback(new Error('提取金额不能高于公积金余额'));
            }else if(!this.disBr && this.formItem.tqjebr == this.jkrye){
                this.yhkkjeShow = false
                return callback(new Error('公积金不能全部提取'));
            }else{
                this.yhkkjeShow = true
                callback()
            }
        };
        //本人提取非空校验
        const brtqfkCheck = async(rule, value, callback) => {
            if(!this.disBr && !this.formItem.tqjebr){
                return callback(new Error('请输入提取金额'));
            }else{
                callback()
            }
        }
        //配偶提取金额校验
        const potqjeCheck = async(rule, value, callback) => {
            if(this.formItem.tqjepo > this.poye){
                this.yhkkjeShow = false
                return callback(new Error('提取金额不能高于公积金余额'));
            }else if(!this.disPo && this.formItem.tqjepo == this.poye){
                this.yhkkjeShow = false
                return callback(new Error('公积金不能全部提取'));
            }else{
                this.yhkkjeShow = true
                callback()
            }
        }
        //配偶提取金额非空校验
        const potqfkChenck = async(rule, value, callback) => {
            if(!this.disPo && !this.formItem.tqjepo){
                return callback(new Error('请输入提取金额'));
            }else{
                callback()
            }
        }
        return {
        ....//不重要，省略
		}

2.在合适的场景中调用

blur 失去焦点时，change 内容改变时
validator 关键字，后面跟开始时自定义的规则名
trigger 关键字，触发节点

data return 里⬇

ruleForm:{
    tqjebr:[
        { validator:brtqfkCheck, trigger: 'blur' },
        { validator:brtqjeCheck, trigger: 'blur' },
        { validator:brtqjeCheck, trigger: 'change' }
    ],
    tqjepo:[
        { validator:potqfkChenck, trigger: 'blur' },
        { validator:potqjeCheck, trigger: 'change' },
        { validator:potqjeCheck, trigger: 'blur' }
    ]
}

3.Form表单提交时，须判断校验是否通过

//提交按钮点击事件
 commitBtn(){
     this.$refs.refForm.validate(async(valid) => {
         if (valid) {
             this.$Message.success('校验通过');
             //执行后续操作
         }else{
             this.$Message.error('请检查输入项！');
         }
     })
 }