Vue 自定义form表单校验

1、在标签添加rules属性

image.png

            
                
                    
                        
                            
                        
                    
                    
                        
                            
                        
                    
                    

                        查询
                    
                
            
        

2、自定义校验规则，如果在rules只有一条规则，有写message属性，自定义返回的消息不回生效，而是返回message属性中的消息，如果没有message属性则返回自定义的消息。

image.png

        /**
         * @Description TODO
         * @Author Peng Kang
         * @Date 2021/5/19 5:19 下午
         * @param field
         * @param value
         * @param cb
         * @param message
         * @return
         */
        validateField(field,value,cb,message){
            if (value === '1') {
                cb()
            } else {
                cb(new Error(message || "请正确填写该字段"));
            }
        }

        /**
         * @Description 提交处理
         * @Author Peng Kang
         * @Date 2021/5/19 5:19 下午
         * @param formName
         * @return
         */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }