利用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 判断页面元素是否存在的代码

    jQuery 判断页面元素是否存在的代码

    在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在。原因是对一个不存在的元素进行操作是不允许的。
    2009-08-08
  • Jquery在指定DIV加载HTML示例代码

    Jquery在指定DIV加载HTML示例代码

    这篇文章主要介绍了Jquery如何在指定DIV加载HTML,需要的朋友可以参考下
    2014-02-02
  • Jquery选择器中使用变量实现动态选择例子

    Jquery选择器中使用变量实现动态选择例子

    这篇文章主要介绍了Jquery选择器中使用变量实现动态选择例子,这样做的好处我们可以动态选择一些元素,核心思想其实就是用字符串组合,需要的朋友可以参考下
    2014-07-07
  • jQuery操作input值的各种方法总结

    jQuery操作input值的各种方法总结

    这篇文章主要介绍了jQuery操作input值的各种方法总结,有需要的朋友可以参考一下
    2013-11-11
  • JQuery的attr 与 val区别

    JQuery的attr 与 val区别

    这篇文章主要介绍了JQuery的attr 与 val区别的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jQuery可见性过滤选择器用法示例

    jQuery可见性过滤选择器用法示例

    这篇文章主要介绍了jQuery可见性过滤选择器用法,结合实例形式分析了jQuery针对元素hidden属性的过滤操作相关技巧,需要的朋友可以参考下
    2016-09-09
  • jquery验证邮箱格式是否正确实例讲解

    jquery验证邮箱格式是否正确实例讲解

    这篇文章主要介绍了一个jquery验证邮箱格式是否正确的实践案例,利用正则表达式进行验证,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 如何让你的Lightbox支持滚轮缩放及Base64图片

    如何让你的Lightbox支持滚轮缩放及Base64图片

    本文主要是记录了1、修改Lightbox源码使支持滚轮缩放;2、修改Lightbox源码使图片的源可支持base64格式;3、如何将Lightbox应用到已有的文章。非常的简单实用,正在使用lightbox的小伙伴可以重点看下,应用到自己项目中,立刻高大上了
    2014-12-12
  • jQuery实现列表的全选功能

    jQuery实现列表的全选功能

    本文给大家分享的是使用jquery实现的全选删除插件的代码,非常的实用,本文示例是结合的ThinkPHP,小伙伴们可以自由扩展。
    2015-03-03
  • jQuery的基本概念与高级编程

    jQuery的基本概念与高级编程

    这篇文章主要介绍了jQuery的基本概念与高级编程的简单介绍,有需要的小伙伴可以参考下。
    2015-05-05

最新评论