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 相关文章推荐
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
JavaScript事件委托实例分析
May 26 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 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 htmlspecialchars加强版
2010/02/16 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
php检测文本的编码
2015/07/26 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
js arguments对象应用介绍
2012/11/28 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
python同时替换多个字符串方法示例
2019/09/17 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
3种python调用其他脚本的方法
2020/01/06 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
高二地理教学反思
2014/01/24 职场文书
运动会广播稿500字
2014/01/28 职场文书
股东合作协议书
2014/04/14 职场文书
信息管理专业自荐书
2014/06/05 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
用人单位聘用意向书
2015/05/11 职场文书
新闻稿格式范文
2015/07/18 职场文书
运动会致辞稿
2015/07/29 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
一文搞懂Python Sklearn库使用
2021/08/23 Python
sql server 累计求和实现代码
2022/02/28 SQL Server
Nginx实现负载均衡的项目实践
2022/03/18 Servers