利用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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 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
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
Python跳出循环语句continue与break的区别
2014/08/25 Python
Python正则表达式匹配ip地址实例
2014/10/09 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
python为什么会环境变量设置不成功
2020/06/23 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
护理个人求职信范文
2014/01/08 职场文书
留学自荐信写作方法
2014/01/27 职场文书
酒鬼酒广告词
2014/03/21 职场文书
企业安全生产标语
2014/06/06 职场文书
预防传染病方案
2014/06/14 职场文书
小学语文教研活动总结
2014/07/01 职场文书
JS数组去重详情
2021/11/07 Javascript