<!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. Gym - 101981J The 2018 ICPC Asia Nanjing Regional Contest J.Prime Game 计数

    题面 题意:1e6的数组(1<a[i]<1e6),     mul (l,r) =l × (l+1) ×...× r,  fac(l,r) 代表 mul(l,r) 中不同素因子的个数,求s ...

  2. Python 2：str.title()（使字符串每个单词首字母大写）

    name = "hello,world! hello,python!" print(name.title()) #单词首字母大写 运行结果将会是:Hello,World!Hello ...

  3. mvc action 缓存的清楚更新办法

    https://www.cnblogs.com/waynechan/p/3232672.html

  4. php数据库批量删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. QS之force(3)

    Example in project - First force signals in certain time and then noforce signals after some time. # ...

  6. Windows上架设自己的ssh代理 — copSSH

    最近网上对ssh代理讨论的比较多, 主要是为了穿墙. 其实在自己的电脑上也可以架设ssh代理, 当然国内自己架的不具有FQ功能, 如果你有国外朋友或是远程win服务器…则可以用此方法架设私有代理. 其 ...

  7. Day 19 numpy 模块

    numpy 模块(多维数组) import numpy as np arr=np.array([1,2,3,4],[5,6,7,8]) print(arr) #[[1 2 3 4] #[5 6 7 8 ...

  8. /proc/sys/vm man手册

    Manual page proc(5) line 1967 (press h for help or q to quit) /proc/sys/vm This directory contains f ...

  9. linux vi面板如何复制一行

    linux vi面板如何复制一行 1)把光标移动到要复制的行上 2)按yy 3)把光标移动到要复制的位置 4)按p

  10. 使用yum update更新文件系统时不更新内核的方法

    CentOS使用yum update更新时不升级内核 cp /etc/yum.conf    /etc/yum.confbak 方法一.修改yum的配置文件 vi /etc/yum.conf  在[m ...