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 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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
Laravel框架生命周期与原理分析
2018/06/12 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
vue 实现的树形菜的实例代码
2018/03/19 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python删除文本中行数标签的方法
2018/05/31 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
在校大学生个人的自我评价
2014/02/13 职场文书
金融管理应届生求职信
2014/02/20 职场文书
党员目标管理责任书
2014/07/25 职场文书
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers