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 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
详解Bootstrap按钮
Jan 04 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 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
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
php封装一个异常的处理类
2017/06/08 PHP
MSN消息提示类
2006/09/05 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
Javascript中神奇的this
2016/01/20 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
Python下singleton模式的实现方法
2014/07/16 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
python递归实现快速排序
2018/08/18 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
python 读取数据库并绘图的实例
2019/12/03 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
什么是跨站脚本攻击
2014/12/11 面试题
村优秀党员事迹材料
2014/01/15 职场文书
奥林匹克的口号
2014/06/13 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
完整版商业计划书
2014/09/15 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
公司开业致辞
2015/07/29 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python