利用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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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验证码函数代码(简单实用)
2013/09/29 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
Python计算回文数的方法
2015/03/11 Python
改进Django中的表单的简单方法
2015/07/17 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python根据url地址下载小文件的实例
2018/12/18 Python
python线程的几种创建方式详解
2019/08/29 Python
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
2014学雷锋活动心得体会
2014/03/10 职场文书
竞选班委演讲稿
2014/04/28 职场文书
美食节策划方案
2014/05/26 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
英语导游词
2015/02/13 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏