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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
js 概率计算(简单版)
Sep 12 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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 金额数字转换成英文
2010/05/06 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
一个用js实现控制台控件的代码
2007/09/04 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
在Python下尝试多线程编程
2015/04/28 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
python实现杨辉三角思路
2017/07/14 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
文明礼仪事迹材料
2014/01/09 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
人事任命书怎么写
2014/06/05 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
公司安全管理制度范本
2015/08/05 职场文书
中职班主任培训心得体会
2016/01/07 职场文书