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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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 闭包特性在实际应用中的问题
2009/10/30 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php 文件上传实例代码
2012/04/19 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
利用npm 安装删除模块的方法
2018/05/15 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
详解javascript void(0)
2020/07/13 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
Python程序退出方式小结
2017/12/09 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
预备党员党校学习自我评价分享
2013/11/12 职场文书
行政主管岗位职责
2013/11/18 职场文书
八年级英语教学反思
2014/01/09 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
洗发露广告词
2014/03/14 职场文书
清洁员岗位职责
2015/02/15 职场文书
人事任命通知书
2015/04/21 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js