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. [iOS]创建一像素的线

    float sortaPixel = 1.0/[UIScreen mainScreen].scale; UIView* line = [[UIView alloc]initWithFrame:CGRe ...

  2. 更改WAS Profiles的概要文件的server1的SDK版本

    WebSphere只能使用IBM JDK 哦,不能使用sun的JDK哦.不过如果只是改jdk的版本的话可以参考如下步骤:(以集群为例,假设具有管理节点Dmgr01,应用概要AppSrv01) 1. 确 ...

  3. 为WAMP中的mysql设置密码（默认为空）

    为WAMP中的mysql设置密码 WAMP安装好后,mysql密码是为空的,那么要如何修改呢?其实很简单,通过几条指令就行了,下面我就一步步来操作. 1.首先,通过WAMP打开mysql控制台. 提示 ...

  4. JDBC的操作总结

    JDBC  操作总结 JDBC是一组能够执行SQL语句的API JDBC的操作方式比较单一,简单的分为以下几个流程:  1.通过数据库厂商提供的JDB类库想DriverManager注册数据库驱动   ...

  5. xcode添加快捷代码块

    添加快捷代码块 在开发过程中,一些常用的代码段,我们可以设置成快捷代码段来快速实现代码的编写. 如上图中的属性的设置,它们都有相同重复的代码@property (nonatomic, strong), ...

  6. WPF 如何画一颗心

    如何用WPF画一个心. MainWindow.xaml <Window x:Class="Heart.MainWindow" xmlns="http://schem ...

  7. System系统类常用方法

    System 系统类: 主要用于获取系统的属性数据. System类常用的方法: arraycopy(Object src, int srcPos, Object dest, int destPos, ...

  8. c#_图表之zeGraph

    关于图表控件: http://blog.csdn.net/sgear/article/details/1449025 其中zedGraph的基本方法及属性介绍: http://wenku.baidu. ...

  9. python之路:Day04 --- Python基础4

    本节内容 1.字符串格式化 2.迭代器和生成器 3.装饰器 4.Json & pickle 数据序列化 5.软件目录结构规范 一.字符串格式化 百分号式 %[(name)][flags][wi ...

  10. Dapper入门学习

    今天了解并学习了下Dapper的用法,这里简单介绍下 1.安装Nuget Dapper Package包 2.代码 using (IDbConnection connection = new SqlC ...