表单校验

表单结构

在data中定义的校验函数

//这个是非必填的校验  
let validatePort1 = (rule, value, callback) => {  
    let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/; //ip地址校验  
    // let reg = /^(([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5]))$/; //端口号校验  
    if (value !== "" && reg.test(value) === false) {  
        callback(new Error("请输入正确格式IP如(11.11.11.11)"));  
    } else {  
        callback();  
    }  
}
  
//这个是必填的校验  
let validatePort = (rule, value, callback) => {  
    let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;  
    if (value === "") {  
        callback(new Error("请输入IP地址"));  
    } else if (value !== "" && reg.test(value) === false) {  
        callback(new Error("请输入正确格式IP如(11.11.11.11)"));  
    } else {  
        callback();  
    }  
}

校验规则

openEditFormRules: {  
    sysType: [{required: true, message: '系统类型不能为空', trigger: 'blur'}],  
    purposeIp: [{  
    required: true,  
    message: validatePort.Error,  
    validator: validatePort,  
    trigger: 'blur'  
    }],  
    purposePort: [{required: true, message: '目的端口不能为空', trigger: 'blur'}],  
    networkProtocol: [{required: true, message: '网络协议不能为空', trigger: 'blur'}],  
    purposeSystem: [{required: true, message: '系统名称不能为空', trigger: 'blur'}],  
}

提交

submitForm(name) {
    this.$refs[name].validate(valid => {
        if(valid){
            //提交代码的逻辑
           }else{
             this.$message.error('错了哦，这是一条错误消息');
         }
    }
}