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 相关文章推荐
JavaScript 对象、函数和继承
Jul 07 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
详解React 元素渲染
Jul 07 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 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函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
小程序实现留言板
2018/11/02 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
py中的目录与文件判别代码
2008/07/16 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
拉丁舞学习者的自我评价
2013/10/27 职场文书
美容院店长岗位职责
2014/04/08 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
新学期开学标语
2014/06/30 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
2014年协会工作总结
2014/11/22 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python