vue 正则校验链接

最新推荐文章于 2024-06-03 17:08:19 发布

lhp_36kr

最新推荐文章于 2024-06-03 17:08:19 发布

阅读量4.2k

点赞数 5

分类专栏： vue

本文链接：https://blog.csdn.net/lhp_36kr/article/details/96109899

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<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' }
       ]
      }
    }
  }
}