利用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 form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 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/24 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
python绘制随机网络图形示例
2019/11/21 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
学校食品安全责任书
2015/01/29 职场文书
鸟的天堂导游词
2015/01/31 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python