网址匹配的正则

最新推荐文章于 2024-09-03 11:37:27 发布

原创最新推荐文章于 2024-09-03 11:37:27 发布 · 787 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#正则表达式 #js #vue

收录于

本文探讨了如何使用正则表达式进行网址验证，特别是在JavaScript和Vue.js环境中，通过监听input值变化实现输入框的有效性检查。

下面展示一些 网址匹配的正则。

// 直接匹配域名地址：
	
var matchString = 'https://www.bilibili.com/';
console.log(match.test(matchString)); // ==> true


// 匹配链接含(*.htm,*.html,*.php,*.aspx...)后缀的地址：
	
var matchString = 'https://i.cnblogs.com/EditPosts.aspx';
console.log(match.test(matchString)); // ==> true


// 匹配含参数的地址：
	
var matchString = 'https://i.cnblogs.com/EditPosts.aspx?opt=1';
console.log(match.test(matchString)); // ==> true

输入框需要验证正则的话，绑定一个监听input值变化的方法就可以了

//这里展示ele ui 里的
	
 <el-input v-model="form.goodUrl" size="mini" style="width:200px" placeholder="输入宝贝链接" @input="checkUrl"></el-input>


//script里这样写

  checkUrl(e) {
      console.log(e);
      var match = /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/;
      var matchString = e;
      console.log(match.test(matchString)); //这里输出布尔值
      if (match.test(matchString)) {
        //验证成功
      } else {
        //验证失败
      }
    },