js表单验证实例讲解
更新时间：2016年03月31日 15:42:34 投稿：lijiao
这篇文章主要为大家详细介绍了js表单验证，JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js表单验证，供大家参考，具体内容如下
JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证。
被JavaScript 验证的这些典型的表单数据有：
1）、用户是否已填写表单中的必填项目？
2）、用户输入的邮件地址是否合法？
3）、用户是否已输入合法的日期？
4）、用户是否在数据域 (numeric field) 中输入了文本？
gspan.html
<html>
<head>
<title>表单验证实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="check.js" type="text/javascript"></script>
<style>
span{ font-size:12px; }
.stats1{ color : #ccc; }
.stats2{ color :black; }
.stats3{ color :red; }
.stats4{ color :green; }
</style>
</head>
<body>
<form method="post" action="reg.php" onsubmit="return regs('click')" >
用户名：<input type="text" name="username" /><span class="stats1">用户名不能为空</span><br/>
邮箱：<input type="text" name="email" /><span class="stats1">邮箱不能为空</span><br/>
密码：<input type="password" name="password" /><span class="stats1">密码不能为空</span><br/>
确认密码：<input type="password" name="chkpass" /><span class="stats1">密码不能为空</span><br/>
<input type="submit" />
</form>
</body>
</html>
check.js
function gspan(cobj){ //获取表单后的span 标签 显示提示信息
if (cobj.nextSibling.nodeName != 'SPAN'){
gspan(cobj.nextSibling);
} else {
return cobj.nextSibling;
}
}
//检查表单 obj【表单对象】， info【提示信息】 fun【处理函数】 click 【是否需要单击， 提交时候需要触发】
function check(obj, info, fun, click){
var sp = gspan(obj);
obj.onfocus = function(){
sp.innerHTML = info;
sp.className = 'stats2';
}
obj.onblur = function(){
if (fun(this.value)){
sp.innerHTML = "输入正确！";
sp.className = "stats4";
} else {
sp.innerHTML = info;
sp.className = "stats3";
}
}
if (click == 'click'){
obj.onblur();
}
}
onload = regs; //页面载入完执行
function regs(click){
var stat = true; //返回状态， 提交数据时用到
username = document.getElementsByName('username')[0];
password = document.getElementsByName('password')[0];
chkpass = document.getElementsByName('chkpass')[0];
email = document.getElementsByName('email')[0];
check(username, "用户名的长度在3-20之间", function(val){
if (val.match(/^\S+$/) && val.length >=3 && val.length <=20){
return true;
} else {
stat = false;
return false;
}
}, click);
check(password, "密码必须在6-20位之间", function(val){
if (val.match(/^\S+$/) && val.length >= 6 && val.length <=20){
return true;
} else {
stat = false;
return false;
}
}, click);
check(chkpass, "确定密码要和上面一致，规则也要相同", function(val){
if (val.match(/^\S+$/) && val.length >=6 && val.length <=20 && val == password.value){
return true;
} else {
stat = false;
return false;
}
}, click);
check(email, "请按邮箱规则输入", function(val){
if (val.match(/\w+@\w+\.\w/)){
return true;
} else {
stat = false;
return false;
}
}, click);
return stat;
}
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
这篇文章主要介绍了javascript 网页进度条简单实例的相关资料,需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了微信小程序实现时间选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了JS实现留言板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了JS Canvas接口和动画效果大全，对Canvas感兴趣的同学，可以参考下2021-04-04
JavaScript新功能介绍之findLast()和findLastIndex()
最近工作中遇到了一个关于查找数组里面的目标元素的方法,所以下面这篇文章主要给大家介绍了关于JavaScript新功能之findLast() 和findLastIndex()的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了正则表达式基本语法及表单验证操作,较为详细的分析了正则表达式的基本语法以及基于JS实现的表单正则验证操作相关实现技巧,需要的朋友可以参考下2017-04-04
对于某一个页面内容繁多,如果我们滚动的时间较长,为了增加用户体验,我们需要实现点击某一个按钮,然后滚动到对应的区域,滚动的时候,右侧对应的分类实现高亮,所以本文给大家详细介绍讲解了js实现电梯导航,需要的朋友可以参考下2023-10-10
经常使用的一些javascript方法，今天总结了一下，以便以后查询，有需要的小伙伴可以参考下。2015-05-05
在 JavaScript 中，对象是引用类型的数据，其优点在于频繁的修改对象时都是在原对象的基础上修改，并不需要重新创建，这样可以有效的利用内存，不会造成内存空间的浪费，对象的这种特性可以称之为 Mutable，中文的字面意思是「可变」2016-05-05
这个是至2009年4月比较新的判断浏览器版本的函数。js判断浏览器版本及版本号，本代码支持最新的ie7，ie8，firefox2，firefox3的判断2009-04-04
最新评论