<!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>

JS经常使用表单验证总结的更多相关文章

  1. ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度

    [卡法 常用js库]: js汇合 表单验证  cookie设置  日期格式  电话手机号码  email  整数  小数  金额   检查参数长度 // +---------------------- ...

  2. js基础-表单验证和提交

    基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...

  3. JS通用表单验证函数,基于javascript正则表达式

    表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...

  4. JS简单表单验证

    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...

  5. 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  6. 原生js的表单验证

    最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...

  7. js——form表单验证

    用js实现一个简易的表单验证 效果: 代码: <html> <head> <title>js校验form表单</title> <meta char ...

  8. 原生JS写表单验证提交功能

    先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...

  9. 原生js制作表单验证，基本的表单验证方法

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...

随机推荐

  1. html5 历史管理

    1.onhashchange:改变hash值来进行历史管理. <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  2. LeetCode.5-最长回文子串(Longest Palindromic Substring)

    这是悦乐书的第342次更新,第366篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Medium级别的第3题(顺位题号是5).给定一个字符串s,找到s中最长的回文子字符串. 您可以假设s ...

  3. java input 实现调用手机相机和本地照片上传图片到服务器然后压缩

    在微信公众号里面需要上传头像,时间比较紧,调用学习jssdk并使用 来不及  就用了input 使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说 ...

  4. .net MVC成长记录（四）Linq（1）

    今天不忙,没什么事情,继续写写随笔. 之前的文章写到了EF,很多人留言EF的操作用什么?  今天,就继续给大家分享EF的操作, Linq . 先从Linq操作Object内置对象开始 从Linq的基础 ...

  5. CSS选择器优先级计算

    优先级从高到低排列,浏览器优先满足前面的规则 1,!important优先级最高 2,内联样式 3,作者>读者>浏览器 4,优先级权重加法 id选择器+100/个 类/伪类选择器+10/个 ...

  6. 一张图说明DIV盒子距离

    虚线的宽高为你实际指定的width和height 虚线外的白色区域为padding 红色区域为border的width 红色外的区域为margin

  7. Android 新浪微博开放平台应用 android签名怎么获得

    方法一: 通过命令行,直接生成MD5值 keytool -list -v -keystore keystorefile -storepass 其中keytool为jdk自带工具:keystorefil ...

  8. 初次尝试PHP——一个简单的对数据库操作的增删改查例子

    第一次学习PHP,很多人说PHP是最好的语言,学习了一点点,还不敢说这样的话,不过确实蛮好用的. 做了一个简单的对数据库的增删改查的操作,主要是将四种操作写成了独立的函数,之后直接调用函数.以下是代码 ...

  9. 【原创】redhat5安装oracle10g

    安装缺失的包: 用 root 用户身份运行以下命令: rpm -q gcc make binutils openmotif setarch compat-db compat-gcc compat-gc ...

  10. fatal error C1083: 无法打开包括文件:“stdio.h

    现象: vs2012一直fatal error C1083: 无法打开包括文件:"stdio.h" 不知道配置太多,动到了什么地方,出现了这个问题: 在: 解决方案--调试源文件 ...