利用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自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 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无限遍历目录示例
2014/02/21 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
javascript 写类方式之二
2009/07/05 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
python statsmodel的使用
2020/12/21 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
Android笔试题总结
2014/11/29 面试题
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
干部培训自我鉴定
2014/01/22 职场文书
家长学校实施方案
2014/03/15 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
单位绩效考核方案
2014/05/11 职场文书
运动会班级口号
2014/06/09 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android