利用jquery正则表达式在页面验证url网址输入是否正确

 更新时间:2017年04月04日 09:52:29   作者:我是干勾鱼  
这篇文章主要介绍了关于利用jquery正则表达式在页面验证url网址输入是否正确的相关资料,文中给出了完整的示例代码,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。

本文介绍的是使用jQuery正则表达式在前台页面验证url网址输入是否正确,代码如下:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

/**
 * 前台页面验证url网址输入是否正确
 */
function postComment() {

 //验证url网址
 if($("input[name='url']").val()) {
  var str=$("input[name='url']").val();
  //判断URL地址的正则表达式为:http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
  //下面的代码中应用了转义字符"\"输出一个字符"/"
  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
  var objExp=new RegExp(Expression);

  if(objExp.test(str) != true){

   alert("网址格式不正确!请重新输入");
   return false;
  } else {
      alert("网址正确!");
    }

 }

}

</script>

</head>
<body>

<div class="form-group">

 <input class="form-url" type="text" placeholder="网址(可选)" name="url" maxlength="50"></input>

</div>

<input class="btn btn-primary" type="submit" value="提交" name="submit" onclick="return postComment()" />

</body>
</html>

如果随便输入一个url网址,则显示:

输入一个正确的,则显示:

当然,使用https也是应该设置为正确的,如图:

主要是在jquery代码中加入了与url网址相关的正则表达式的验证。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    这篇文章主要介绍了jQuery通过控制节点实现仅在前台通过get方法完成参数传递的功能,实例分析了jQuery操作节点的技巧与控制前台get方法传递参数的用法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 实例详解jQuery的链式编程风格

    实例详解jQuery的链式编程风格

    jQuery中的链式操作,它让代码变得更有层次更简洁,所以这篇文章主要给大家介绍了关于jQuery链式编程风格的相关资料,需要的朋友可以参考下
    2021-06-06
  • 基于jquery的地址栏射击游戏代码

    基于jquery的地址栏射击游戏代码

    地址栏射击游戏!对,你没看错,就是在地址栏上玩的游戏,有图有真相!之前在网上看到这个小游戏,可惜在墙外,中午研究了一下,搬到国内来了,看看吧!
    2011-03-03
  • Eclipse配置Javascript开发环境图文教程

    Eclipse配置Javascript开发环境图文教程

    这篇文章主要介绍了Eclipse配置Javascript开发环境图文教程,需要的朋友可以参考下
    2015-01-01
  • jQuery插件MixItUp实现动画过滤和排序

    jQuery插件MixItUp实现动画过滤和排序

    MixItUp过滤排序jQuery插件是一款鼠标滑过图片显示描述的jQuery过滤排序插件。是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能。特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容。
    2015-04-04
  • jQuery实现淡入淡出效果

    jQuery实现淡入淡出效果

    这篇文章主要为大家详细介绍了jQuery实现淡入淡出效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • jquery操作select详解(取值,设置选中)

    jquery操作select详解(取值,设置选中)

    本篇文章主要是对jquery操作select(取值,设置选中)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • jquery分页插件AmSetPager(自写)

    jquery分页插件AmSetPager(自写)

    第一次做的插件,我这个插件好像使用有些另类,是调用数据展示容器的元素$(#DataContent).AmSetPager({...});在参数中配置分页容器元素ID。写完插件后看别的插件都是调用分页元素ID
    2013-04-04
  • jquery ajax执行后台方法

    jquery ajax执行后台方法

    jquery ajax调用动态网页内容的方法,其实下面的这个例子很简单的返回数据。
    2010-03-03
  • jquery 子窗口操作父窗口的代码

    jquery 子窗口操作父窗口的代码

    jquery 子窗口操作父窗口的实现代码。
    2009-09-09

最新评论