html+js结构如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery i18n Plugin</title>
<style>
div{
width: 400px;
margin: 100px auto;
}
input{
width: 300px;
height: 32px;
margin-top: 10px;
padding: 0px 10px;
box-sizing: border-box;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>

<body>
<div>
<input type="text" placeholder="请输入中文数字字母下划线" data-type="name"/>
<input type="text" placeholder="请输入数字字母下划线" data-type="mix"/>
<input type="text" placeholder="请输入手机号" data-type="telephone"/>
<input type="text" placeholder="请输入邮箱" data-type="email"/>
</div>
<script type="text/javascript">
$(document).ready(function(){
var html = '';//用来存放input校验后的value
//获得焦点事件
$('body').on('focus','input',function(){
html = $(this).val();
})

//输入框修改事件
$('body').on('input','input',function() {
var text = '',
inputType = $(this).data("type");
if(inputType=="name"){
regFun($(this),$(this).val(),/^(?!_)[a-zA-Z_0-9\u4e00-\u9fa5]+$/g,"请输入中文数字字母下划线,不能以下划线开头")
}else if(inputType=="mix"){
regFun($(this),$(this).val(),/^(?!_)[a-zA-Z_0-9]+$/g,"请输入数字字母下划线，不能以下划线开头")
}
});

//用来按下键盘直接修改input的value值的情况调用此方法
function regFun(obj,text,regexp,warn){
if(regexp.test(text)){
text.replace(regexp,function(res){
html = res;//如果正则匹配成功将匹配结果赋值给html
});
}else{
if(text!=''){
alert(warn)
}else{
html = '';
}
if(obj.data("type")=="name"){
obj.val(html);
}
}
// return html;
if(obj.data("type")!="name"){
obj.val(html);
}
}

//对于一些像邮箱手机号这样的用户输入完全之后才能校验的用失去焦点的事件
$('body').on('blur','input',function(){
var inputType = $(this).data("type");
if(inputType=="telephone"){
blurFun($(this),/^1[34578]\d{9}$/,"手机号输入有误！")
}else if(inputType=="email"){
blurFun($(this),/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,"邮箱输入有误！")
}
});
//失去焦点事件校验的方法
function blurFun(obj,regexp,warn){
var text = obj.val();
if(!regexp.test(text)&&text!=''){
console.log(warn);
obj.focus();
}
}
});
</script>
</body>
</html>

replace实现正则过滤替换非法字符的更多相关文章

  1. ruby中url解码并替换非法字符

    url中中文字符解码 str = URI.decode(url_str) 替换非法字符 if ! str.valid_encoding? p str = str.encode("UTF-16 ...

  2. JS利用正则配合replace（）函数替换指定字符

    定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp,replacement) ...

  3. c# 替换非法字符

    保存文件的时候,文件名不允许非法字符. public string ReplaceSpecialCharacter(string str)        {            List<ch ...

  4. windows文件名非法字符过滤检测-正则表达式

    过滤文件名非法字符 windows现在已知的文件名非法字符有 \ / : * ? " < > | var reg = new RegExp('[\\\\/:*?\"&l ...

  5. Asp.Net正则过滤一个div

    Asp.Net过滤一对标签,例如div.ul.p.li.span等 html = “html page”; Regex regPage = new Regex(@"(?is)<div\ ...

  6. java 非法字符过滤 , 半角/全角替换

    java 非法字符过滤 , 半角/全角替换 package mjorcen.netty.test1; import java.io.UnsupportedEncodingException; publ ...

  7. JS利用正则配合replace替换指定字符

    替换指定字符的方法有很多,在本文为大家详细介绍下,JS利用正则配合replace是如何做到的,喜欢的朋友可以参考下 定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一 ...

  8. Javascript replace 为什么只替换一个字符？

    Javascript replace 为什么只替换一个字符? 如下代码,为什么结果是 "a2b1c1" ? 'a1b1c1'.replace('1', 2); 因为 javascr ...

  9. vue， js 正则邮箱验证、匹配非法字符、匹配中文

    验证邮箱 let self = this let regEmail= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)* ...

随机推荐

  1. Xml序列化去掉命名空间，去掉申明

    #region 序列化        /// <summary>        /// 序列化        /// </summary>        /// <par ...

  2. js加密参数传给后台，后台解密base64

    前台js // base64加密开始 var keyStr = "ABCDEFGHIJKLMNOP" + "QRSTUVWXYZabcdef" + " ...

  3. Android Studio上NDK/JNI开发环境问题

    基础环境: 操作系统 —— Windows 7 Android Studio —— 1.5.1(android-studio-bundle-141.2456560-windows.exe) NDK — ...

  4. PHP中的date()函数

    d  月份中的第几天,有前导零的 2 位数字 01 到 31 D  星期中的第几天,文本表示,3 个字母 Mon 到 Sun j  月份中的第几天,没有前导零 1 到 31 l  ("L&q ...

  5. Delphi的Trim函数

    三个Trim函数简介 函数原型 function Trim(const S: string): string; 将字符串前后的空白及控制字元清掉. 注意Trim函数只能清掉字符串前后的空格及控制字元, ...

  6. Dump类型说明

    通过使用windbg提供DbgHelp库中的MiniDumpWriteDump函数在程序崩溃时写dump文件记录程序当时状态,为后续分析问题提供现场. 该函数提供了DumpType参数,让程序员根据具 ...

  7. WiX Toolset 教程索引页

    注意:虽然WiX Toolset功能强大,但其学习曲线相对较高.请慎重选择: 若没有足够时间.没心思搞的请绕行至inno setup.installshield.nisi.setupfactory.. ...

  8. 【积累篇：他山之石，把玉攻】解决XP 系统 .Net Framework 4安装时出现严重错误 (0x80070643)

    第一步: 1.开始——运行——输入cmd——回车——在打开的窗口中输入net stop WuAuServ 2.开始——运行——输入%windir% 3.在打开的 的窗口中有个文件夹叫SoftwareD ...

  9. docker学习

    一.基本概念1.Docker镜像 Docker镜像(Image)就是一个只读的模板. 例如:一个镜像可以包含一个完整的ubuntu操作系统环境,里面仅安装了Apache或用户需要的其它应用程序. 镜像 ...

  10. Ie8+，强制默认使用ie8模式