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 相关文章推荐
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
Vue中的$set的使用实例代码
Oct 08 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
javascript 易错知识点实例小结
Apr 25 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
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
JavaScript中的私有成员
2006/09/18 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
Javascript之String对象详解
2016/06/08 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
python实现无证书加密解密实例
2014/10/27 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
python 异或加密字符串的实例
2018/10/14 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
快速查找Python安装路径方法
2020/02/06 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
机电一体化职业规划书
2014/01/07 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
Python如何识别银行卡卡号?
2021/06/10 Python
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
无线电通信名词解释
2022/02/18 无线电