javascript表单验证大全
被 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表单验证完美代码
用原生JS写一个简单的表单验证 首先,是html部分 <div class="divAll"> <div id="titles">新用户注册</div> <div id="contents"> <h3>基本信息</h3> <hr width="95%" color="#f2f2f2"/> <form action=&q
-
JavaScript 基础表单验证示例(纯Js实现)
验证思路 监听每个input控件的焦点离开(onblue),当焦点离开时调用验证函数,验证后修改第三栏文字,显示符合/不符合并返回true/false 实现代码: index.html <!DOCTYPE html> <html> <head> <title></title> <pnk rel="stylesheet" href="css.css" rel="external nofollo
-
JavaScript表单验证的两种实现方法
本文实例为大家分享了js表单验证的实现方法,供大家参考,具体内容如下 第一种:js表单验证 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册-个人用户</title> <meta http-equiv="pragma" content="no-cache"
-
纯JS实现表单验证实例
表单我实现了,input属性是text(文本框).radio(单选按钮).checkbox(多选按钮)的知识点, fieldset标签(组合表单中的相关元素).select标签(选择列表)和textarea标签(多行文本框). <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" onsubmit="return check
-
javascript实现的简单的表单验证
表单验证几乎是不可缺少的,有的表单验证是在后台完成的,有的则是使用JavaScript在在前端完成基本的验证,这样可以有效的减轻服务器的压力,下面就介绍一下JS实现的最简单的表单验证.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <script type="text/javascript
-
javascript表单验证大全
被 JavaScript 验证的这些典型的表单数据有以下几种: 1.用户是否已填写表单中的必填项目? 2.用户输入的邮件地址是否合法? 3.用户是否已输入合法的日期? 4.用户是否在数据域 (numeric field) 中输入了文本? 下面是用户名和密码验证代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &
-
JavaScript表单验证开发
本文实例为大家分享了js表单验证的具体代码,供大家参考,具体内容如下 在线demo:http://www.hui12.com/nbin/csdn/jsInput/demo.html 效果图: /* 验证类型 testName: "验证用户", testPassword: "密码", testPhone: "手机号码", testQQ: "验证QQ", testLength: "验证是否在指定长度内", //
-
详解JavaScript表单验证（E-mail 验证）
本文为大家分享了JavaScript表单验证,被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输入的邮件地址是否合法? 用户是否已输入合法的日期? 用户是否在数据域 (numeric field) 中输入了文本? 必填(或必选)项目 下面的函数用来检查用户是否已填写表单中的必填(或必选)项目.假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题): function validat
-
JavaScript表单验证实现代码
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输入的邮件地址是否合法? 用户是否已输入合法的日期? 用户是否在数据域 (numeric field) 中输入了文本? 必填(或必选)项目 下面的函数用来检查用户是否已填写表单中的必填(或
-
拥有一个属于自己的javascript表单验证插件
自己编写了一个表单验证插件,使用起来很简单,以后还可以扩展更多的功能,比如ajax验证. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息. 验证时机:1
-
利用策略模式与装饰模式扩展JavaScript表单验证功能
简单的表单验证 html结构 <!-- validata.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Validata</title> </head> <body> <form id="form"> <labe
-
常用javascript表单验证汇总
实例讲解:验证输入的是否是数字,是否满足数字位数,如果错误,并进行友情提醒. 效果图: <!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h1> <p>请输入数字.如果输入值不是数字,浏览器会弹出提示框.</p> <input id="demo" type="text"> <script> function
-
JavaScript 表单验证正则表达式大全[推荐]
具体和函数结合的使用方法,还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 复制代码 代码如下: 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行 匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?
-
ASP动态生成的javascript表单验证代码
以网上down了一个ASP动态生成Form验证javascript的代码,自己扩容了一下.作者的大名我给忘了,不过我记得清楚,从第一条至第九条的代码都是该作者的原创.至于九至第十五条却是本人自己加的哦.而且由于本人水平有限,从第九条至第十五条不见得会条条生效啊?呵呵,其实把它贴在这里没有什么必要的,因为这点小会伎俩谁都会用的,我把它的作用定位为:开发时找不到该函数时到这里拷贝一下就可以了.呵,因为我即没有刻录机也没有移动硬盘.实在是没有办法把这些代码随身携带,不过还好,在北京到处都可以上网.所以