<html>
<head>
<style>
#d1{
left:30;
top:30;
width:440;
height:300;
position:absolute;
background-color:#cccccc;
}
#d1_head{
height:30;
font-size:20pt;
color:white;
background-color:blue;
}
#d1_body{
padding-top:40;
padding-left:40;
}
.s1{
color:red;
}
.s2{
background-color:#ffee55;
}
</style>
<script>
function valiForm(){
return valiName() && valiPwd();
}
function valiName(){
//step1 先找到要操作的节点
var obj = document.getElementById('name');
//className属性：用于设置或者读取
//节点的class属性值。
obj.className='';
var msg = document.getElementById('name_msg');
msg.innerHTML='';
//step2 对节点的操作
//value属性 ： (input控件 + textarea)的值
var v1 = obj.value;
if(v1.length==0){
//innerHTML: 可以读取或者设置
//标记之间的内容
msg.innerHTML='名字不能为空';
obj.className='s2';
return false;
}else{
return true;
}
}
function valiPwd(){
var obj = document.getElementById('pwd');
obj.className='';
var msg = document.getElementById('pwd_msg');
msg.innerHTML='';
if(obj.value.length==0){
msg.innerHTML='密码不能为空';
obj.className='s2';
return false;
}else{
return true;
}
}
</script>
</head>
<body style="font-size:20pt;">
<div id="d1">
<div id="d1_head">表单数据验证</div>
<div id="d1_body">
<form action="" method="" onsubmit="return valiForm();">
<table>
<tr>
<td>name</td>
<td><input type="text" name="name" id="name"
onblur="valiName();"/>
<span class="s1" id="name_msg"></span>
</td>
</tr>
<tr>
<td>password</td>
<td><input type="password" name="pwd" id="pwd" onblur="valiPwd();"/>
<span class="s1" id="pwd_msg"></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="confirm"/>
<input type="reset" value="reset"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
分享到：
相关推荐
主要特色： 完全响应式； 完美键盘操作支持； 可定制的输入标签：select, radio, checkbox 以及 file； 自定义的日期选择器 本地化支持 表单验证的代码示例：
表单验证 类 很不错JS文件 有缘吗 文档 示例代码
原创，自己写的一套表单验证js文件。 /*使用说明 * 示例 邮箱"> * 字段注释 comments="邮箱" * 非空 notnull="true" * 最大长度 maxlength="30" * 负小数 datatype="ldouble" * 非负小数 datatype="rdouble" * 负...
本文实例讲述了JS实现的简单表单验证功能。分享给大家供大家参考，具体如下： 源代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
jQuery formValidator表单验证插件示例源码 jQuery formValidator表单验证插件是什么? jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。你可以划分多个校验组，每个组的...
一个Ajax表单检测验证实例，在不刷新网页的情况下对表单中的各个输入项进行检查，并显示出错误提示，在众多ajax表单中，本示例并不是最复杂的，因此对于学习研究类似表单的...ajax无刷新表单验证插件就是基于此的实现。
本文实例讲述了layui.js实现的表单验证功能。分享给大家供大家参考，具体如下： 该示例可针对文本框，手机，邮箱，textarea等格式进行验证 首先引入如下文件： [removed][removed] [removed][removed] <link rel...
在我们的日常业务中，表单验证是个很常见设计需求，像一些登录注册框，问卷调查也都需要用到表单验证。 一般我们的实现思路都是JS监听input框的输入内容，判断用户输入内容，从而以此来决定下一步的操作。 例如这样...
主要介绍了js表单登陆验证的方法,基于thinkPHP前端页面实现javascript针对表单用户名与密码的验证功能,需要的朋友可以参考下
web开发的前台验证，本示例的源码中还分模式进行验证，每一种模式的验证都独具特色，值得您下载的一片文档哦~！
JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 代码如下: function regIsDigit(fData) { var reg = new RegExp(“^[0-9]$”); return (reg.test(fData)); } 利用这则表达式获取字符串...
主要介绍了JavaScript使用表单元素验证表单的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
完整了前端页面表单登录，有js判断输入格式。适合很多系统的登录页面使用。
实现代码： index.html <!DOCTYPE html> <html> <head> <title></title> </head> <body> <form id=form action= method=post onsubmit=return vipdate()> <
北大青鸟ACCP5.0JavaScript特效与表单验证-书中示例源代码 。都是自己手写的代码，我正在学习的内容。这部分是上机作业。大家交流一下吧。
Validate.js是一个轻量级的JavaScript表单验证类库，它不依赖于其它任何JavaScript框架，经GZIP压缩后仅有1KB大小。它所提供的验证类型有：是否为空、数字、Email地址、判断输入值是否在某一范围内等，此外你也可以...
被 JavaScript 验证的这些典型的表单数据有： 用户是否已填写表单中的必填项目？用户输入的邮件地址是否合法？用户是否已输入合法的日期？用户是否在数据域 (numeric field) 中输入了文本？必填（或必选）项目 下面...
ChkInputs.js应运而生，使用它不需要编写多少代码，只需对验证元素简单配置一下即可，使用方便，也不会影响页面的布局，并可以精确判断客户端输入框的长度、必填、数据类型(整数型、浮点型、字母型、数字字母混合型)...