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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
jQuery 性能优化指南(3)
May 21 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 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分页显示制作详细讲解
2006/12/05 PHP
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
自荐信的五个重要部分
2013/10/29 职场文书
保安员岗位职责
2013/11/17 职场文书
公司中秋节活动方案
2014/02/12 职场文书
感谢信模板大全
2015/01/23 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
年终工作总结范文
2019/06/20 职场文书
Go语言编译原理之源码调试
2022/08/05 Golang