element ui 自定义表单校验 校验IP地址与端口号 VUE

有时候需要前端来规范一下输入框的输入格式，比如只能输入ip地址格式等，那么我们可以直接借助 element ui 自定义表单校验 校验IP地址与端口号
 

我们在data中定义我们的校验函数 

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])$/;    //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 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])$/;

      if (value == "") {

        callback(new Error("请输入IP地址"));

      } else if (value !== "" && reg.test(value) === false) {

        callback(new Error("请输入正确格式IP如(11.11.11.11)"));

      } else {

        callback();

      }

    }; //这个是必填的校验

使用：直接在我们我校验规则对象中应用：

rulers:{

  sip: [

          {

            required: true,

            message: validatePort1.Error,

            validator: validatePort1,

            trigger: "blur",

          },

        ]

}