vue 正则校验链接

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

.NET跨平台

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

阅读量1k

点赞数

分类专栏： Vue.js(Vue 2/Vue 3) 文章标签： vue.js javascript ecmascript

原文链接：https://blog.csdn.net/WuLex

版权

Vue.js(Vue 2/Vue 3) 专栏收录该内容

92 篇文章 4 订阅

订阅专栏

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

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