js实现基于正则表达式的轻量提示插件

本文实例讲述了基于正则表达式的轻量提示插件，分享给大家供大家参考。具体如下：
这是一款javascript实现基于正则表达式的轻量提示插件，本插件是基于正则表达式进行文本框检测的，通用性十分强,大家可以在实例中进行使用。
运行效果图：               -------------------查看效果-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
关键代码：

    $(document).ready(function () {
      $("#message").inputNotes(
       {
         sexwarning: {
           pattern: /(^|\s)色情(\s|$)/ig,
           type: 'warning',
           text: 'Do not type "sex"!'
         },
         numbersnote: {
           pattern: /[0-9]/,
           type: 'note',
           text: 'Do not type numbers!'
         }
       }
      );
    });

为大家分享的代码如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>基于正则表达式的轻量提示插件</title>
  <script src="js/jquery-1.7.1.js"></script>
  <script src="js/jquery.inputnotes-0.6.js"></script>
</head>
<style>
  div.inputnotes div.warning
  {
    color: #fff;
    background: #f03;
  }
</style>
<body>
  若输入“不合法”字眼的文字将提示<br />
  <textarea  id="message" cols="60" rows="4" ></textarea>
  <a href="javascript:void(null);" onclick="alert( $('#message').hasInputNotes() )"><br />文本框是否含不合法的字符</a>
  <script>
    $(document).ready(function () {
      $("#message").inputNotes(
       {
         sexwarning: {
           pattern: /(^|\s)不合法(\s|$)/ig,
           type: 'warning',
           text: '不能出现 "不合法"相关的字符!'
         },
         numbersnote: {
           pattern: /[0-9]/,
           type: 'note',
           text: 'Do not type numbers!'
         }
       }
      );
    });

  </script>
</body>
</html>

以上就是为大家分享的基于正则表达式的轻量提示插件，希望大家可以喜欢，并应用到实践中。

赞 (0)

相关推荐

  • Bootstrap每天必学之js插件

    Bootstrap每天必学之js插件

    1.Bootstrap 插件概览 在前面 布局组件 章节中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件.利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发. 2.导入JavaScript插件 Bootstrap除了包含丰富的W

  • javascript常见数据验证插件大全

    原生Javascript电话号码验证,邮件验证,身份证验证.使用时传入要验证的字符串,返回ture代表符合,返回false代码不符合. 使用: document.getElementById("btnPhone").onclick=function(){ alert(ValidationHandler.IsPhone(document.getElementById("phoneInput").value)==true?"合法":"不合法

  • JS插件overlib用法实例详解

    本文实例讲述了overlib用法.分享给大家供大家参考,具体如下: overLIB 是一个生成提示框与弹出菜单等页面效果的一段非常优秀的JS代码. 它可以简单的通过设置一些参数或命令来改变弹出页面的款式.皮肤与形状,不但如此,它还提供了非常简单的扩展功能,来足客户的不同需求. overLIB 使用非常的简单. 一.在<head></head> 标签内添加: 复制代码 代码如下: <script type="text/javascript" src=&quo

  • 常用的Javascript数据验证插件

    常用的Javascript数据验证插件

    原生Javascript电话号码验证,邮件验证,身份证验证.使用时传入要验证的字符串,返回ture代表符合,返回false代码不符合. 使用: document.getElementById("btnPhone").onclick=function(){ alert(ValidationHandler.IsPhone(document.getElementById("phoneInput").value)==true?"合法":"不合法

  • 纯JavaScript实现的分页插件实例

    本文实例讲述了纯JavaScript实现的分页插件.分享给大家供大家参考.具体如下: //总条数(必填) var Num=Number(<?php echo $count;?>) //当前页(必填) var index = Number(<?php echo $page;?>); /* //每页的条数(可选,默认每页10条) */ var pageNum=Number(10); /* //最大显示的页码的数目(可选,默认显示5个页码,页码数目必须大于等于1) */ var maxP

  • JS拖拽插件实现步骤

    JS拖拽插件实现步骤

    这篇文章详细介绍了JS拖拽插件的实现步骤,主要从以下六步做详细分析,具体内容如下: 一.js拖拽插件的原理 二.根据原理实现的最基本效果 三.代码抽象与优化 四.扩展:有效的拖拽元素 五.性能优化和总结 六.jquery插件化 js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠标 3.拖拽元素到一定位置,放开鼠标 这里的过程涉及到三个dom事件:o

  • 页面内容排序插件jSort使用方法

    页面内容排序插件jSort使用方法

    当页面列表内容很多的时候,我们可能需要将内容按照某个方式进行排序,比如按照字母或者大小等排序.本文将使用排序插件jSort来对页面内容进行排序. jSort插件可以对页面任何内容进行排序(tables, lists, div elements),跨浏览器兼容且非常轻巧. 运行效果图: XHTML 首先在head部分引入jquery库和jSort插件. <script type="text/javascript" src="http://ajax.googleapis.c

  • 几个优化WordPress中JavaScript加载体验的插件介绍

    WordPress 本身以及主题和插件通常需要加载一些 JavaScript 来实现某些特殊功能.为了最大限度地保证兼容性,不至于出现 JavaScript 失效的情况,所以一般在页头加载 JavaScript 文件.但是根据 Yahoo 开发者论坛的建议,加载 JavaScript 应该尽量在页尾以提高页面的显示(响应.渲染)速度.本文根据作者的使用经验介绍几个相关插件,并说明如何在某些特殊页面仍然在页头加载 JavaScript. 下面先简单介绍几个相关的优化 JavaScript 的 Wo

  • pace.js页面加载进度条插件

    pace.js页面加载进度条插件

    本文简单介绍插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约.闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色! 调用方法: 引入Pace.j

  • js实现基于正则表达式的轻量提示插件

    js实现基于正则表达式的轻量提示插件

    本文实例讲述了基于正则表达式的轻量提示插件,分享给大家供大家参考.具体如下: 这是一款javascript实现基于正则表达式的轻量提示插件,本插件是基于正则表达式进行文本框检测的,通用性十分强,大家可以在实例中进行使用. 运行效果图:               -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 关键代码: $(document).ready(function () { $("#mess

  • 深入理解Vue.js轻量高效的前端组件化方案

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发初衷

  • JS基于正则表达式的替换操作(replace)用法示例

    本文实例讲述了JS基于正则表达式的替换操作(replace)用法.分享给大家供大家参考,具体如下: 正则表达式替换使用的是replace()方法.Replace()方法是用一些字符途欢另一些字符 语法:stringObject.replace(regexp,replacement) regexp 必需.规定了要替换的模式的 RegExp 对象.请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象. replacement 必需.一个字符串值.规定

  • JS基于正则表达式实现的密码强度验证功能示例

    JS基于正则表达式实现的密码强度验证功能示例

    本文实例讲述了JS基于正则表达式实现的密码强度验证功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 我们</title> </head> <style type="text/cs

  • JS中的正则表达式及pattern的注意事项

    RegExp对象的创建: 常规的正则表达式的创建可用直接量,即斜杠 "/" 括起来的字符.但在要求参数变化的环境下,RegExp()构造函数是更好的选择: var reg1 = /'\w+'/g; var reg2 = new RegExp('\'\\w+\'','g'); 对比两种创建方式,RegExp中的第一个参数为要创建的正则字符串,一方面注意,因为不是直接量的表示形式,因此不用斜杠" / "括起来了:而是字符串中必须要对引号" ' "和转

  • 日常收集JS邮箱验证正则表达式

    背景:正则是一门厚书啊,想写好也不容易,但日常中也就那些像电话.邮箱.手机,网上一堆,但真好验证好了,还得了解一点正则知识,再就是多测试了:-) 下面邮箱正则: 中划线:中划线域名就是米农口中说的扁担域名了,扁担域名由于输入比较麻烦,看起来也比较不正规,是没有多大的价值,目前投资的人是比较少的.按照DNS的标准,域名是不允许有下划线的. 下划线:一些人在注册用户名的喜欢使用下划线_,这种用户名在登录邮箱时很麻烦,给你发邮件的人也很不方便. 二级域名邮箱基本被消灭,这个哥们的正则可以写下划线,扩大

  • 编写轻量ajax组件01-与webform平台上的各种实现方式比较

    前言 Asp.net WebForm 和 Asp.net MVC(简称MVC) 都是基于Asp.net的web开发框架,两者有很大的区别,其中一个就是MVC更加注重http本质,而WebForm试图屏蔽http,为此提供了大量的服务器控件和ViewState机制,让开发人员可以像开发Windows Form应用程序一样,基于事件模型去编程.两者各有优缺点和适用情景,但MVC现在是许多Asp.net开发者的首选. WebForm是建立在Asp.net的基础上的,Asp.net提供了足够的扩展性,我

  • 前端必会的轻量打包工具gulp使用详解

    前端必会的轻量打包工具gulp使用详解

    目录 一. 安装Node和gulp 二.使用gulp压缩Js 2.1 方法 2.2 步骤 三. 压缩CSS文件 3.1 步骤 四. 压缩图片 五. 编译Less文件 六. 编译Sass文件 一. 安装Node和gulp gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率. 在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件.而这些工作都是有规律的.找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”. 安装

  • 深入浅析js中的正则表达式

    阅读目录 正则表达式的创建 正则表达式中的特殊字符 \ (反斜杠) ^ $ *,  +,  .(小数点) ? (问号) (x) (?:x) x(?=y), x(?!y), x|y {n}, {n,m}: [xyz], [^xyz] 其他 正则表达式标志 正则表达式使用 很多时候多会被正则表达式搞的晕头转向,最近抽出时间对正则表达式进行了系统的学习,整理如下: 正则表达式的创建 两种方法,一种是直接写,由包含在斜杠之间的模式组成:另一种是调用RegExp对象的构造函数. 两种方法的创建代码如下:

  • Java/Js下使用正则表达式匹配嵌套Html标签

    Java/Js下使用正则表达式匹配嵌套Html标签

    通用 HTML 标签区配正则 最近看网站日志,发现有人在博客上转了我不知道几年前写的一个匹配 HTML 标签的正则,刚好最近也在做一些相关的事情,顿时来了兴趣.就拿回来改改,成了下面这样,可能会有一些 case 遗漏,欢迎修改,已知在内嵌 <script> 复杂内容的处理能力较弱,不过对纯 HTML 来说已经够用,拿来做一些分析工具还是不错滴. 复制代码 代码如下: <script type="text/javascript"> var str = "

随机推荐