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 相关文章推荐
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
基于js实现的图片拖拽排序源码实例
Nov 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
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
PHP实现货币换算的方法
2014/11/29 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
js 内存释放问题
2010/04/25 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
实例讲解Python中的私有属性
2014/08/21 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
python简单分割文件的方法
2015/07/30 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
python3多线程知识点总结
2019/09/26 Python
详解python破解zip文件密码的方法
2020/01/13 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
教师暑期培训感言
2014/08/15 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
经理岗位职责
2015/02/02 职场文书
工程部岗位职责范本
2015/04/11 职场文书