代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>添加管理员 </title>
<script src="v.js" type="text/javascript"></script><style type="text/css">
<!--
#form1 table {
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
width:271px;
height:56px;
margin-left: 20px
}
#form1 table.td{
vertical-align:middle;
text-align:center;
}
#m{
margin: 20px;
}
.border {
background-color: #999999;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#title{
padding:5px;
background-color:#666666;
color:#003366;
font-weight: bolder; }
#msgDiv {
font-weight: bold;
color: #FF0000;
width:200px;
float:left;
padding-left:20px;
}-->
</style>
</head><body>
<form id="form1" name="form1" method="post" action="file:///F|/Demos/checkjsDemo/addAdmin">
<div class="border" style="width:310px;height:170px;">
<p id="title">添加管理员</p>
<div id="msgDiv"> </div>
<table >
<tr>
<td>用户名:
<input name="text" type="text" id="txtUserName" checktype="empty" /> </td>
</tr>
</table>
<input type="submit" name="Submit" value="添加" id="m" />
</div>
</form>
</body>
</html>
js代码如下 :function Validater(){
this.pass = true;
var me = this; function isInput(el)
{
var sType = el.type;
var t = 'false';
switch(sType){
case "text":
case "hidden":
case "password":
case "file":
case "textarea":
t = 'text';
break;
case "checkbox":
case "radio":
t = 'radio';
break;
case "select-one":
case "select-multiple":
t = 'select';
break;
}
return t;
} me.validateEmpty = function(control)
{
var t = isInput(control);
if(t == 'text')
{
if(typeof(control.value)=="undefined" || control.value == "null")
{
me.pass = false;
}
}
//此处的control.type 应该是text啊,为什么是submit ???
document.getElementById("msgDiv").innerText = control.type;
}
function isDisabled(el){
if(el.type=="radio"||el.type=="checkbox"){
var tmpels = document.getElementsByName(el.name);
for(var i=0;i<tmpels.length;i++){
if(tmpels[i].disabled==false){
return false;
}
}
return true;
}else{
return el.disabled;
}
}
me.bandEvent = function(){
var form = document.form1;
document.form1.onsubmit = function(){
if(!me.pass){
document.getElementById("msgDiv").innerText ='请输入用户名';
}
return me.pass;
}
elems = form.elements;
bandInput(elems);
}
function bandInput(elems){
for(var i = 0 ; i <elems.length;i++){
var control = elems[i];
if(!isDisabled(control)&&isInput(control)!='false')
{
var key = control.getAttribute("checkType");
if(typeof(key)!="undefined" && key != null){
if(key == "empty")
{
//此处绑定的方法,control 还是text类型呢。为什么传入参数后成submit类型的了
control.onblur = function(){
me.validateEmpty(control);
}
}
}
}
}
}
}window.onload = function(){var me = new Validater();me.bandEvent();}为什么一个input text 元素,传入参数后成submit类型的了求解。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>添加管理员 </title>
<script src="v.js" type="text/javascript"></script><style type="text/css">
<!--
#form1 table {
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
width:271px;
height:56px;
margin-left: 20px
}
#form1 table.td{
vertical-align:middle;
text-align:center;
}
#m{
margin: 20px;
}
.border {
background-color: #999999;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#title{
padding:5px;
background-color:#666666;
color:#003366;
font-weight: bolder; }
#msgDiv {
font-weight: bold;
color: #FF0000;
width:200px;
float:left;
padding-left:20px;
}-->
</style>
</head><body>
<form id="form1" name="form1" method="post" action="file:///F|/Demos/checkjsDemo/addAdmin">
<div class="border" style="width:310px;height:170px;">
<p id="title">添加管理员</p>
<div id="msgDiv"> </div>
<table >
<tr>
<td>用户名:
<input name="text" type="text" id="txtUserName" checktype="empty" /> </td>
</tr>
</table>
<input type="submit" name="Submit" value="添加" id="m" />
</div>
</form>
</body>
</html>
js代码如下 :function Validater(){
this.pass = true;
var me = this; function isInput(el)
{
var sType = el.type;
var t = 'false';
switch(sType){
case "text":
case "hidden":
case "password":
case "file":
case "textarea":
t = 'text';
break;
case "checkbox":
case "radio":
t = 'radio';
break;
case "select-one":
case "select-multiple":
t = 'select';
break;
}
return t;
} me.validateEmpty = function(control)
{
var t = isInput(control);
if(t == 'text')
{
if(typeof(control.value)=="undefined" || control.value == "null")
{
me.pass = false;
}
}
//此处的control.type 应该是text啊,为什么是submit ???
document.getElementById("msgDiv").innerText = control.type;
}
function isDisabled(el){
if(el.type=="radio"||el.type=="checkbox"){
var tmpels = document.getElementsByName(el.name);
for(var i=0;i<tmpels.length;i++){
if(tmpels[i].disabled==false){
return false;
}
}
return true;
}else{
return el.disabled;
}
}
me.bandEvent = function(){
var form = document.form1;
document.form1.onsubmit = function(){
if(!me.pass){
document.getElementById("msgDiv").innerText ='请输入用户名';
}
return me.pass;
}
elems = form.elements;
bandInput(elems);
}
function bandInput(elems){
for(var i = 0 ; i <elems.length;i++){
var control = elems[i];
if(!isDisabled(control)&&isInput(control)!='false')
{
var key = control.getAttribute("checkType");
if(typeof(key)!="undefined" && key != null){
if(key == "empty")
{
//此处绑定的方法,control 还是text类型呢。为什么传入参数后成submit类型的了
control.onblur = function(){
me.validateEmpty(control);
}
}
}
}
}
}
}window.onload = function(){var me = new Validater();me.bandEvent();}为什么一个input text 元素,传入参数后成submit类型的了求解。
{
control.onblur = (function(obj){
return function(){me.validateEmpty(obj);}
})(control);
}