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 相关文章推荐
JavaScript 继承的实现
Jul 09 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
Vue之Watcher源码解析(1)
2017/07/19 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
JavaScript 异步调用
2017/10/25 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
react配置antd按需加载的使用
2019/02/11 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
Python 多线程Threading初学教程
2017/08/22 Python
python下10个简单实例代码
2017/11/15 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
解决python线程卡死的问题
2019/02/18 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
资源工程专业毕业生求职信
2014/02/27 职场文书
公开承诺书格式
2014/05/21 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android