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 相关文章推荐
jquery 双色表格实现代码
Dec 08 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
javascript中this指向详解
Apr 23 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
javascript基础知识讲解
Jan 11 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
JS实现秒杀倒计时特效
Jan 02 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 function用法如何递归及return和echo区别
2014/03/07 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
Vue header组件开发详解
2018/01/26 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
Python代理抓取并验证使用多线程实现
2013/05/03 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
在django view中给form传入参数的例子
2019/07/19 Python
Python 如何对文件目录操作
2020/07/10 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
给朋友的道歉信
2014/01/09 职场文书
学校消防安全制度
2014/01/30 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书