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 相关文章推荐
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
JQuery学习总结【二】
Dec 01 Javascript
微信小程序实现上传图片功能
May 28 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 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
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
使用python编写监听端
2018/04/12 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
中专毕业生求职简历的自我评价
2013/10/21 职场文书
年度考核自我鉴定
2014/02/02 职场文书
员工拓展培训方案
2014/02/15 职场文书
建党伟业电影观后感
2015/06/01 职场文书
交通安全教育心得体会
2016/01/15 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
python使用pymysql模块操作MySQL
2021/06/16 Python
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫