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 相关文章推荐
List Installed Software Features
Jun 11 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 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处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
php简单统计中文个数的方法
2016/09/30 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
python查看模块,对象的函数方法
2018/10/16 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
总裁办公室主任职责
2014/01/02 职场文书
八年级历史教学反思
2014/01/10 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
个人委托函范文
2015/01/29 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
导游词之无锡梅园
2019/11/28 职场文书