利用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 24 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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
最省空间的计数器
2006/10/09 PHP
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
对python中的高效迭代器函数详解
2018/10/18 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
办公室内勤岗位职责范本
2013/12/09 职场文书
离婚协议书范本样本
2014/08/19 职场文书
2014年度工作总结报告
2014/12/15 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers