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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
Vue基础配置讲解
Nov 29 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 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设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
JS中Map和ForEach的区别
2018/02/05 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
Django如何使用redis作为缓存
2020/05/21 Python
Python中格式化字符串的四种实现
2020/05/26 Python
学生党员一帮一活动总结
2014/07/08 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
致运动员赞词
2015/07/22 职场文书
党章学习心得体会2016
2016/01/14 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers