<!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. clone的rails目录下命令无效问题

    异常坑爹,在公司克隆自己的项目.然后在项目目录下rails s还有一大堆命令无效,提示 Usage: rails new APP_PATH [options]   找了半天总算找到解决办法了,在项目目 ...

  2. bzoj2822[AHOI2012]树屋阶梯(卡特兰数)

    2822: [AHOI2012]树屋阶梯 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 879  Solved: 513[Submit][Status] ...

  3. F - Modular Exponentiation

    Problem description The following problem is well-known: given integers n and m, calculate 2n mod m, ...

  4. HBase编程 API入门系列之delete（客户端而言）（3）

    心得,写在前面的话,也许,中间会要多次执行,连接超时,多试试就好了. 前面的基础,如下 HBase编程 API入门系列之put(客户端而言)(1) HBase编程 API入门系列之get(客户端而言) ...

  5. 常用MIME类型(Flv,Mp4的mime类型设置)

    也许你会在纳闷,为什么我上传了flv或MP4文件到服务器,可输入正确地址通过http协议来访问总是出现“无法找到该页”的404错误呢?这就表明mp4格式文件是服务器无法识别的,其实,这是没有在iis中 ...

  6. Android 侦听应用（Package）变化的方法侦听广播

    应用的状态变化,包括安装.卸载.更新,是android系统上重要的事件.如何侦听到?有两种方法,一是通过侦听广播,一是实现PackageMonitor. 侦听广播   当Package状态发生变化时, ...

  7. 【sqli-labs】 less35 GET- Bypass Add Slashes(we dont need them) Integer based (GET型绕过addslashes() 函数的整型注入)

    整型注入不用闭合引号,那就更简单了 http://192.168.136.128/sqli-labs-master/Less-35/?id=0 union select 1,database(),3% ...

  8. （转）基于Metronic的Bootstrap开发框架经验总结（1）-框架总览及菜单模块的处理

    http://www.cnblogs.com/wuhuacong/p/4757984.html 最近一直很多事情,博客停下来好久没写了,整理下思路,把最近研究的基于Metronic的Bootstrap ...

  9. （转）Arcgis for Js之GeometryService实现测量距离和面积

    http://blog.csdn.net/gisshixisheng/article/details/40540601 距离和面积的测量时GIS常见的功能,在本节,讲述的是通过GeometryServ ...

  10. vue货币格式化组件、局部过滤功能以及全局过滤功能

    一.在这里介绍一个vue的时间格式化插件: moment 使用方法: .npm install moment --save. 2 定义时间格式化全局过滤器 在main.js中 导入组件 import ...