JavaScript通过RegExp实现客户端验证处理程序


Posted in Javascript onMay 07, 2013

1.让文本框只允许输入数字,运用asp.net mvc3.0的文本框控件

@Html.TextBox("txt",null, new {@style="width:300;",onkeypress="return RegValidateIsDigit(event)" })

可以看到在文本框中注册了onkeypress事件,当在文本框中输入一个字符按下键盘的时候就会触发该JavaScript的函数
<script type="text/javascript"> 
function RegValidateIsDigit(e) { 
var KeyChar; 
debugger; 
////判断浏览器 
if (window.event) //IE 
{ 
KeyChar = e.keyCode; 
} 
else if (e.which)///FireFox等 
{ 
KeyChar = e.which; 
} 
var str = String.fromCharCode(KeyChar); ///通过UniCode编码来来查找相应的字符 
return regIsDigit(str); 
} 
function regIsDigit(fData) { 
///定义正则进行匹配 
var reg = new RegExp("^[0-9]$"); 
return (reg.test(fData)); 
} 
</script>

首先判断一下浏览器,进行处理兼容性。然后通过String.formCharCode(KeyChar)来查找相应的字符
最后在函数regIsDigit函数中
定义正则进行匹配
var reg = new RegExp("^[0-9]$");

因为是数值0-9所以也等同于\d即
var reg = new RegExp("\\d$");

正则表达式直接量也被定义为包含在一对斜杠(/)之间的字符.所以,JavaScript可能会包含如下的代码:
var reg=/\d$/;

这里还用到了test函数: 检查指定的字符串是否存在。常用的还有exec match search replace split等函数。
如果搞懂了第一个那么只需要套用正则就可以使用了哦。
2.文本框只允许输入中文
function RegValidateIsChinese(str) { 
//var reg = new RegExp("^[\u4e00-\u9fa5]+$"); 
var reg = /^[\u4E00-\u9FA5]+$/; 
var str=document.getElementById("text").value; 
return (reg.test(str)); 
}

RegValidateIsChinese("输入的字符串") 是汉字则返回true,不全是汉字则返回false
3.邮箱输入格式的判断
function RegValidateIsEmail(str) { 
//var reg = /^([a-zA-Z0-9_-])+@@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; 
var reg=/^\w+((-\w+)|(\.\w+))*@@{1}\w+\.{1}\w{2,4}(\.{0,1}\w{2}){0,1}/ig; 
if (reg.test(str)) { 
alert("是邮箱"); 
} 
else { 
alert("格式不对"); 
} 
}

两个定义初步测试都可以。
Javascript 相关文章推荐
JS DOM 操作实现代码
Aug 01 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
微信小程序合法域名配置方法
May 06 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 #Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 #Javascript
基于JavaScript 类的使用详解
May 07 #Javascript
解读JavaScript中 For, While与递归的用法
May 07 #Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 #Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 #Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 #Javascript
You might like
PHP的博客ping服务代码
2012/02/04 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php之readdir函数用法实例
2014/11/13 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
php并发加锁示例
2016/10/17 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
js实现分割上传大文件
2016/03/09 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
原生js实现日历效果
2020/03/02 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
简单介绍Python中的JSON使用
2015/04/28 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
python如何实现异步调用函数执行
2019/07/08 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
资料员的岗位职责
2013/11/20 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
房产公证书范本
2014/04/10 职场文书
Flask response响应的具体使用
2021/07/15 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android
python blinker 信号库
2022/05/04 Python