利用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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery操作css样式
May 15 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery实现推拉门效果
Oct 19 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
JS实现可改变列宽的table实例
2013/07/02 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
详解webpack+express多页站点开发
2017/12/22 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
Vuex 入门教程
2018/01/10 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
在Python中移动目录结构的方法
2016/01/31 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
艺术用品:Arteza
2018/11/25 全球购物
2014年优质护理服务工作总结
2014/11/14 职场文书
初中体育教学随笔
2015/08/15 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle
java中如何截取字符串最后一位
2022/07/07 Java/Android