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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
JS函数节流和函数防抖问题分析
Dec 18 Javascript
JavaScript实现滚动加载更多
Dec 27 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
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匿名函数(闭包函数)详解
2019/03/22 PHP
JS与C#编码解码
2013/12/03 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
vuex入门最详细整理
2020/03/04 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python实现的端口扫描功能示例
2018/04/08 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
Python datetime模块使用方法小结
2020/06/18 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
测绘工程专业个人自我评价
2013/12/01 职场文书
木工主管岗位职责
2013/12/08 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
管理专员自荐信
2014/01/26 职场文书
美容院营销方案
2014/03/05 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
2014年招生工作总结
2014/11/26 职场文书
留学推荐信中文范文
2015/03/26 职场文书
开场白怎么写
2015/06/01 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
基于JavaScript实现省市联动效果
2021/06/22 Javascript
Python&Matlab实现樱花的绘制
2022/04/07 Python
vue3不同环境下实现配置代理
2022/05/25 Vue.js