利用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树插件zTree使用方法详解
May 02 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
基于jQuery拖拽事件的封装
Nov 29 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的源码中深入了解stdClass类
2014/04/18 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
实现PHP搜索加分页
2016/10/12 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
python编写弹球游戏的实现代码
2018/03/12 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Python3内置模块random随机方法小结
2019/07/13 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
pytorch实现查看当前学习率
2020/06/24 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
python如何随机生成高强度密码
2020/08/19 Python
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
建筑班组长岗位职责
2014/01/02 职场文书
项目经理任命书内容
2014/06/06 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
导游词之峨眉山
2019/12/16 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL