<!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. [转]RDLC报表格式化format表达式

    本文转自:http://www.cnblogs.com/samlin/archive/2012/04/17/FormatDateTime.html 刚开始接触RDLC报表,觉得RDLC报表提供的格式化 ...

  2. CentOS7 搭建Kafka（一）zookeeper篇

    CentOS7 搭建Kafka(一)zookeeper篇 近几年当红小生Kafka备受各路英雄好汉追捧,一点不比老前辈RabbitMQ和ActiveMQ差,因为流行,所以你就得学啊:我这么懒,肯定是不 ...

  3. Halcon学习笔记之支持向量机（二）

    例程:classify_halogen_bulbs.hdev 在Halcon中模式匹配最成熟最常用的方式该署支持向量机了,在本例程中展示了使用支持向量机对卤素灯的质量检测方法.通过这个案例,相信大家可 ...

  4. 树莓派-USB存储设备自动挂载

    简单介绍实现命令行下USB存储设备自动挂载的方法,Linux gnome/kde窗口环境下有移动存储的管理程序,可以实现自动挂载移动存储设备,但是在命令行下 通常需要用mount命令手动挂载USB存储 ...

  5. div自动适应浏览器窗口水平和垂直居中

    html <body> <div id="centerDiv">自动适应水平和垂直居中</div> </body> css ;;} ...

  6. 关于Membership和身份认证的记录

    在今天写好的code中测试环节,当我用webconfig中的测试数据库就是ok的,但是更替为正式的就不行了: 报错的类是MemberShip,那就关系到身份认证的环节了 找了几个链接,记录下 1.身份 ...

  7. 用cmd查看win8版本 激活等详细信息命令

    Win+x===>选择以管理员身份运行,输入: slmgr /dlv   显示:最为详尽的激活信息,包括:激活ID.安装ID.激活截止日期slmgr /dli 显示:操作系统版本.部分产品密钥. ...

  8. Functor and Monad in Swift

    I have been trying to teach myself Functional Programming since late 2013. Many of the concepts are ...

  9. HTML DIV中文字自动换行 , 顶部对齐

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  10. C 预处理程序指令（CPP）

    #include 文件 提供的东西 stdio 提供 FILE.stdin.stdout.stderr 和 fprintf() 函数系列 stdlib 提供 malloc().calloc()和 re ...