利用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实现全选、全不选以及单选功能
Mar 23 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
django ajax json的实例代码
2018/05/29 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python中return的返回和执行实例
2019/12/24 Python
pytorch标签转onehot形式实例
2020/01/02 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
农救科工作职责
2013/11/27 职场文书
超市开学活动方案
2014/03/01 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
药店营业员岗位职责
2015/04/14 职场文书
2016年感恩节寄语
2015/12/07 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
MySQL慢查询优化解决问题
2022/03/17 MySQL
宝塔更新Python及Flask项目的部署
2022/04/11 Python