JS常用表单验证方法总结


Posted in Javascript onMay 22, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>表单验证</title> 
<script language="javascript"> 
function check_1(param){//不为空 
if(param==""||param==null){return false;}else{return true;} 
} 
function check_2(param){//长度限制,字母是10个,汉字也是10个 
if(param.length>10){return false;}else{return true;} 
} 
function check_3(param){//只能输入汉字 
var pattern= /^[\u4e00-\u9faf]+$/; 
var flag = pattern.test(param); 
if(flag==false){return false;}else{return true;} 
} 
function check_4(param){//只能输入数字 
var pattern= /^[0-9]+$/; 
var flag = pattern.test(param); 
if(flag==false){return false;}else{return true;} 
} 
function check_5(param){//只能输入数字字母下划线 
var pattern= /^[0-9a-zA-z_]+$/; 
var flag = pattern.test(param); 
if(flag==false){return false;}else{return true;} 
} 
function check_6(param){//邮箱格式验证 
var pattern= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; 
var flag = pattern.test(param); 
if(flag==false){return false;}else{return true;} 
} 
function check_7(param){//网址格式验证 
var pattern= /^((https|http|ftp|rtsp|mms)?:\/\/)?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?(([0-9]{1,3}\.){3}[0-9]{1,3}|([0-9a-z_!~*'()-]+\.)*([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\.[a-z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+\/?)$/; 
var flag = pattern.test(param); 
if(flag==false){return false;}else{return true;} 
} 
function check(){ 
var value=document.getElementById("testValue").value; 
var result=check_7(value);//在这里设置验证函数的名称,我写了check_1~check_7七个常用的表单验证函数 
if(result==false){ 
document.getElementById("testValue").style.border="2px solid red"; 
}else{ 
//document.getElementById("testValue").style.border="2px solid green"; 
document.getElementById("testValue").style.border=""; 
} 
} 
</script> 
</head> 
<body> 
<div style="text-align: center;padding: 200px 0;"> 
请输入: <input id="testValue" name="" class="" type="text" style="width:200px;height:30px;"></input> 
<input id="" name="" class="" type="button" value="点击验证" style="width:70px;height:30px;" onclick="check()"></input> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
一个Action如何调用两个不同的方法
May 22 #Javascript
选择复选框按钮置灰否则按钮可用
May 22 #Javascript
JavaScript获取路径设计源码
May 22 #Javascript
javascript学习笔记--数字格式类型
May 22 #Javascript
禁用Enter键表单自动提交实现代码
May 22 #Javascript
javascript常见用法总结
May 22 #Javascript
JS常用字符串处理方法应用总结
May 22 #Javascript
You might like
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
php实现微信发红包功能
2018/07/13 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
Python 创建空的list,以及append用法讲解
2018/05/04 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
世界上最好的足球商店:Unisport
2019/03/02 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
土建施工员岗位职责
2014/07/16 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
汶川大地震感悟
2015/08/10 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
Golang Web 框架Iris安装部署
2022/08/14 Python