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、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
微信小程序实现图片上传功能
May 28 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
javascript实现简易聊天室
Jul 12 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中常用编辑器推荐
2007/01/02 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
javascript new一个对象的实质
2010/01/07 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
Python3内置模块random随机方法小结
2019/07/13 Python
python实现简易淘宝购物
2019/11/22 Python
python实现低通滤波器代码
2020/02/26 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
韩语专业本科生求职信
2013/10/01 职场文书
应届大学生自荐信
2013/12/05 职场文书
店铺转让协议书
2014/12/02 职场文书
干部考察材料范文
2014/12/24 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
创业计划书之家教托管
2019/09/25 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
netty 实现tomcat的示例代码
2022/06/05 Servers
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python