vue 正则校验链接

1. 

<el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="20px" @keyup.enter.native="dataFormSubmit()">

2.

export default {
  data () {
    let isTrueUrl = (rule, value, callback) => {
      let reg = /(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/
      if (!reg.test(value)) {
        callback(new Error('请输入正确的链接'))
      } else {
        callback()
      }
    }
    return {
     rules: {
       title: [
        {required: true, message: '请输入标题', trigger: 'blur'},
        { max: 50, message: '标题长度不能超过50个字符', trigger: 'blur' }
       ],
       url: [
        {required: true, message: '请输入链接地址', trigger: 'blur'},
        { validator: isTrueUrl, trigger: 'blur' }
       ]
      }
    }
  }
}