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


Posted in Javascript onAugust 29, 2015

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

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

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

$(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>

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

Javascript 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 #Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 #Javascript
jquery实现清新实用的网页菜单效果
Aug 28 #Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 #Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 #Javascript
js实现简单折叠、展开菜单的方法
Aug 28 #Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 #Javascript
You might like
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
PHP入门学习笔记之一
2010/10/12 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
Vue组件开发初探
2017/02/14 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
python中class的定义及使用教程
2019/09/18 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python 合并拼接字符串的方法
2020/07/28 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
工作失误检讨书范文大全
2014/01/13 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
初中新生军训方案
2014/05/13 职场文书
小学语文教师研修日志
2015/11/13 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
Python中可变和不可变对象的深入讲解
2021/08/02 Python
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL