javascript表单验证大全


Posted in Javascript onAugust 12, 2015

被 JavaScript 验证的这些典型的表单数据有以下几种:

1.用户是否已填写表单中的必填项目?

2.用户输入的邮件地址是否合法?

3.用户是否已输入合法的日期?

4.用户是否在数据域 (numeric field) 中输入了文本?

下面是用户名和密码验证代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function validateForm()
{
 var username = document.forms["myForm"]["username"].value;
 var password = document.forms["myForm"]["password"].value;
 alert(username+" "+password);
}
</script>
</head>
<body>
<form name="myForm" action="" onSubmit=" return validateForm()" method="post">
用户名:<input type="text" name="username"/><br/>
密码:<input type="password" name="password"/><br/>
 <input type="submit" value="提交"/>
</form>
</body>
</html>

必填(或必选)项目验证:

下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
 {alert(alerttxt);return false}
else {return true}
}
}

下面是连同 HTML 表单的代码:

<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
 {
 if (value==null||value=="")
 {alert(alerttxt);return false}
 else {return true}
 }
}
function validate_form(thisform)
{
with (thisform)
 {
 if (validate_required(email,"Email must be filled out!")==false)
 {email.focus();return false}
 }
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>
</html>

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
 {alert(alerttxt);return false}
else {return true}
}
}

下面是连同 HTML 表单的完整代码:

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
 {alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
 {email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>
</html>

以上代码是用户名、密码、必填、必选项和email以及连同表单的代码,希望对大家学习javascript表单验证有所帮助。

Javascript 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 #Javascript
jQuery实现文件上传进度条特效
Aug 12 #Javascript
XML文件转化成NSData对象的方法
Aug 12 #Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 #Javascript
jQuery实现动态添加和删除一个div
Aug 12 #Javascript
JavaScript多线程详解
Aug 12 #Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 #Javascript
You might like
坏狼php学习 计数器实例代码
2008/06/15 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
javascript 解析url的search方法
2010/02/09 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
Python中super的用法实例
2015/05/28 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
thinkphp5 路由分发原理
2021/03/18 PHP
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
法国春天百货官网:Printemps.com
2020/06/29 全球购物
新领导上任欢迎词
2014/01/13 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
房屋租赁意向书
2014/04/01 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
MySQL创建定时任务
2022/01/22 MySQL
Web应用开发TypeScript使用详解
2022/05/25 Javascript
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python