利用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 21 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 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 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
python爬虫常用的模块分析
2014/08/29 Python
深入理解Python中的元类(metaclass)
2015/02/14 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python3大文件解压和基本操作
2017/12/15 Python
python使用生成器实现可迭代对象
2018/03/20 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
python word转pdf代码实例
2019/08/16 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
python实现简单的购物程序代码实例
2020/03/03 Python
Pygame的程序开始示例代码
2020/05/07 Python
python实现二分查找算法
2020/09/18 Python
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
银行批评与自我批评
2014/02/10 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers
Golang并发工具Singleflight
2022/05/06 Golang