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


Posted in jQuery onApril 04, 2017

本文介绍的是使用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网址,则显示:

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

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

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

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

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

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

总结

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

jQuery 相关文章推荐
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 #jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 #jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 #jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 #jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 #jQuery
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 #jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 #jQuery
You might like
php使用GeoIP库实例
2014/06/27 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
浅析PHP开发规范
2018/02/05 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
jQuery 位置插件
2008/12/25 Javascript
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
python求素数示例分享
2014/02/16 Python
Python多进程同步简单实现代码
2016/04/27 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
你真的了解Python的random模块吗?
2017/12/12 Python
python定时关机小脚本
2018/06/20 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
领导干部贪图享乐整改措施
2014/09/21 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
赡养老人协议书范本
2015/08/06 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书