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 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
JS常用函数使用指南
Nov 23 Javascript
javascript连续赋值问题
Jul 08 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
javascript正则表达式总结
Feb 29 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
详解vue微信网页授权最终解决方案
Jun 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
菜鸟修复电子管记
2021/03/02 无线电
PHP 加密与解密的斗争
2009/04/17 PHP
php 魔术方法详解
2014/11/11 PHP
php中switch语句用法详解
2015/08/17 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
Python只用40行代码编写的计算器实例
2017/05/10 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python重要函数eval多种用法解析
2020/01/14 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
幼儿园大班区域活动总结
2014/07/09 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书