javascript表单验证大全
2015-08-12 00:00
836 查看
被 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中的Hoisting机制
- 详细解读JavaScript的跨浏览器事件处理
- JavaScript中的call方法和apply方法使用对比
- 简单方法实现json数据可视化
- js 转义特殊字符到 html
- javascript中的+ 和 “”
- 正则资源 / JS 阅读资源
- 自定义标签 tag AttachTag 实现附件jsp方便的显示和下载
- js动态增加删除ul节点li
- JS写一个函数输出今天的日期
- JavaScript权威指南_153_第16章_脚本化CSS_16.3-脚本化内联样式
- JS跟随鼠标旋转的图片
- 理解javascript中的策略模式
- 一款在论坛上看到的JS封装的随机过渡方式的图片切换效果
- js实现的一个lru缓存
- angular.fromJson方法与toJson方法
- 灵活运用JSON
- Html(5)其他(缓存 及 js控制css)
- JavaScript 编程
- position relative 与 js 原生动画 浏览器兼容问题