利用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插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jquery实现抽奖功能
Oct 22 jQuery
jQuery实现购物车全功能
Jan 11 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
vue项目实现图片上传功能
2019/12/23 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
python 监控logcat关键字功能
2020/09/04 Python
《听鱼说话》教学反思
2014/02/15 职场文书
新学期教师寄语
2014/04/02 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
小学推普周活动总结
2015/05/07 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
Python requests用法和django后台处理详解
2022/03/19 Python
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS