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 相关文章推荐
javascript event 事件解析
Jan 31 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 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与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
Javascript Math对象
2009/08/13 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
Vue中props的详解
2019/05/16 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
python 图像平移和旋转的实例
2019/01/10 Python
python3.6数独问题的解决
2019/01/21 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
员工考核管理制度
2014/02/02 职场文书
清扬洗发水广告词
2014/03/14 职场文书
股东合作协议书范本
2014/04/14 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
介绍信怎么写
2015/05/05 职场文书
可怜妈妈观后感
2015/06/09 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
创业计划书之花店
2019/09/20 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL