利用jquery正则表达式在页面验证url网址输入是否正确

本文介绍的是使用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网址，则显示：

输入一个正确的，则显示：

当然，使用https也是应该设置为正确的，如图：

主要是在jquery代码中加入了与url网址相关的正则表达式的验证。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Java使用正则表达式对注册页面进行验证功能实现

    本文给大家介绍java使用正则表达式对注册页面进行验证的代码,代码如下所示: package regex; import java.util.Scanner; import java.util.regex.Matcher; import java.util.regex.Pattern; public class registered { public static void main(String[] args) { //注册用户 Scanner sc=new Scanner(System.in

  • js正则表达式注册页面表单验证

    js正则表达式注册页面表单验证

    正则表达式方式的验证方式,这个验证比较标准而且比较全面,不过也是通过点击提交按钮才进行验证,本实例可以这样验证,具体内容如下 也可以这样验证 具体代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单验证类Validator v1</title> <style&g

  • 正则表达式进行页面表单验证功能

    正则表达式进行页面表单验证功能

    一般做到注册页面的时候,当用户填完信息,都需要对他们的信息进行验证,这就要用到正则表达式,具体看下面这个例子. 效果图:(当用户填写的信息不符合规范时显示错误提示) 我只提供了html结构和js,样式你们按照自己的设计稿自己写,我是分别给正确的时候和错误的时候加了不同的class,用了不同的高度,正确是高度小,可以把提示的红字隐藏. html结构: <div id="wrap"> <h1>注册</h1> <div> <input t

  • 使用正则表达式验证登录页面输入是否符合要求

    使用正则表达式验证登录页面输入是否符合要求

    先给大家展示下效果图: 废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> $(f

  • 动态向页面添加控件和使用正则表达式的代码

    复制代码 代码如下: namespace WebCode { public partial class _default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { String str = "这是一个测试文件<{config name=\"pagetitle1\"}>,一个标签的解析<{config name=\"pagetitle2\

  • Python正则表达式匹配HTML页面编码

    html页面一般都会指定一个编码,如何获取到是处理html页面的第一步,因为错误的编码必然带来后面处理的问题.这里我用python的正则表达式写了个: import re a = ["<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />", '<meta http-equiv=Content-Type content="text/ht

  • 利用jquery正则表达式在页面验证url网址输入是否正确

    利用jquery正则表达式在页面验证url网址输入是否正确

    本文介绍的是使用jQuery正则表达式在前台页面验证url网址输入是否正确,代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"&

  • Js检测判断URL网址输入是否正确

    检查是否为URL function check(){ str = form1.txt.value; str = str.match(/http:\/\/.+/); if (str == null){ alert('你输入的URL无效'); return false; }else{ alert("你输入的URL有效"); return true; } } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS使用正则表达式提交页面验证的代码

    如何用正则表达式提交验证 首先,我们先用一首歌活跃一下气氛! 门前大桥下 游过一群鸭 快来快来数一数 二四六七八 嘎嘎嘎嘎 真呀真多呀- stop,我们来进入正题↓ 1:让你们看一下我么老师布置的作业 2:需要呈现的效果是:看图片 3:那么,下面需要的就是代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title><

  • c#使用正则表达式匹配字符串验证URL示例

    在System.Text.RegularExpression命名空间里,有正则表达式方法. 复制代码 代码如下: using System.Collections.Generic; using System.Text;using System.Text.RegularExpressions; namespace RegexDemo{    class Program    {        static void Main(string[] args)        {            R

  • 利用jquery.qrcode在页面上生成二维码且支持中文

    实例如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>使用j

  • 基于jquery的设置页面文本框 只能输入数字的实现代码

    代码如下: 复制代码 代码如下: $("#money").bind("propertychange",function() { if(""!=this.value){ var str = this.value.replace(/(^\s*)|(\s*$)/g, ""); if(this.value != str ) this.value = str; } if( isNaN(Number(this.value))) this.

  • jquery Validation表单验证使用详解

    jquery Validation表单验证使用详解

    是一款优秀的插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性.本文就是通过讲解这个实例来理解Validation的应用. 本实例涉及到的验证有: 用户名:长度.字符验证,重复性ajax验证(是否已存在). 密码:长度验证,重复输入密码验证. 邮件:邮件地址验证. 固定电话:中国大陆固定电话号码验证. 手机号:中国大陆手机号码验证. 网址:网站URL地址验证. 日期:标准日期格式验证. 数字:整数.正整数验证,数字范围验证. 身份证:大陆身份证号码验证. 邮政编码:

  • jQuery动态追加页面数据以及事件委托详解

    jQuery动态追加页面数据以及事件委托详解

    我们要执行的任务是页面起初有一部分图片,我们在底下有一个More Photos的链接,点击后,向当前页面后加载一部分图片,再点击该链接,继续加载,直到将我们列出的页面加载完成,此时该链接也消失了. 首先效果图如下: 这个只截取了最底下的一部分页面.在鼠标悬停在图片上时,还会有文字出现,鼠标移出时文字消失. 我们现在要做的就是点击底下的MorePhotos链接时,再加载一部分数据,然后再点击在加载一部分数据,直到数据加载完. 首先body中代码如下: <div id = "container

  • ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能

    ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能

    页面样式代码: 复制代码 代码如下: <style type="text/css"> .header { background-color: #CCCCCC; color: White; font-size: x-large; } .content { background-color: White; font-weight: lighter; font-size: small; } .content td { text-align: left; } .mandatory

  • 利用jQuery.Validate异步验证用户名是否存在（推荐）

    HTML头部引用: <script type="text/JavaScript" src="../js/jQuery-1.3.2.min.js"></script> <script type="text/javascript" src="../js/jquery.validate.min.js"></script> <script type="text/javas

随机推荐