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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
JavaScript中的Location地址对象
Jan 16 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
JS修改css样式style浅谈
May 06 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
vue中导出Excel表格的实现代码
Oct 18 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/06/21 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
Python字符转换
2008/09/06 Python
Python微信库:itchat的用法详解
2017/08/14 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
解决Python一行输出不显示的问题
2018/12/03 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
消防先进事迹材料
2014/02/10 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
法人委托书范本格式
2014/09/15 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
无罪辩护词范文
2015/05/21 职场文书
原告离婚代理词
2015/05/23 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
python 中yaml文件用法大全
2021/07/04 Python
详解OpenCV曝光融合
2022/04/29 Python