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 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
浅析vue component 组件使用
Mar 06 Javascript
ES6学习教程之对象字面量详解
Oct 09 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
php中序列化与反序列化详解
2017/02/13 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
python中的数据结构比较
2019/05/13 Python
jupyter notebook 多行输出实例
2020/04/09 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
致400米运动员广播稿
2014/02/07 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
个人授权委托书样本
2014/09/13 职场文书
平面设计师岗位职责
2014/09/18 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书