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. phpstudy 80端口被占用，修改端口

    搭建mantis,总会出现80端口被占用的情况.看到别的步骤是:1.cmd 运行netstat -ano查看80端口被什么占用,然后在任务管理器找到对应的结束进程.通常情况下是被System占用,右击 ...

  2. Riemann映射定理

    单复变函数几何理论最高的成就我想应该属于Riemann映射定理吧! Riemann映射定理:$\mathbb C$中任意边界多余一个点的单连通域$D$都与单位圆盘$B(0,1)$等价,即存在着$D$上 ...

  3. webServer-----Spring 集成cxf笔录

    目前webserver主要有俩中方式:1,传统的webserver标准集成方式-生成WSDL的xml文档.       2, 基于restful风格的webserver java RESTful We ...

  4. MySQL Workbench中修改表字段字符集

    背景介绍重要性必要性作用意义略过,开门见山: 用SQL语法修改字符集,可以参考此篇: http://www.cnblogs.com/HondaHsu/p/3640180.html MySQL提供图形界 ...

  5. Dapper入门学习

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

  6. wkhtmltopdf 将网页转换为PDF和图片

    wkhtmltopdf 是一个shell工具,它使用了WebKit渲染引擎和Qt,将网页html转换为pdf的强大工具,转换后的pdf也可以通过pdf工具进行复制.备注.修改 官网下载地址:http: ...

  7. 【Hibernate框架】对象的三种持久化状态

    一.综述 hibernate中的对象有三种状态,分别是TransientObjects(瞬时对象).PersistentObjects(持久化对象)和DetachedObjects(托管对象也叫做离线 ...

  8. 学习微信小程序之css9内边距

    padding内边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. ecplise + hadoop 调试环境搭建

    1.需要安装包 1.1 hadoop源码包(hadoop-2.5.2-src.tar.gz) 1.2 hadoop 2X插件(hadoop2x-eclipse-plugin-master.zip) 1 ...

  10. Maven的pom.xml 配置详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...