利用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中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery实现本地存储
Dec 22 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根据图片色界在不同位置加水印的方法
2015/07/01 PHP
繁简字转换功能
2006/07/19 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
python模拟Django框架实例
2016/05/17 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python看某个模块的版本方法
2018/10/16 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python3 xpath和requests应用详解
2020/03/06 Python
python模块内置属性概念及实例
2021/02/18 Python
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
生产厂厂长岗位职责
2013/12/25 职场文书
在校学生职业规划范文
2014/01/08 职场文书
幼儿园开学寄语
2014/04/03 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
使用springMVC所需要的pom配置
2021/09/15 Java/Android