做项目时,有时会需要很多的表单,每个表单一个一个的写验证方法会很麻烦,就试着写了一个能统一验证的方法,只需在每个表单的页面复制粘贴即可,仅供参考。
1,表单:
<form method="post" action="<%=path%>/pavoutypedefine.do?action=updatePavouColumn" id="form1" name="form1" οnsubmit="">
<table width="100%" class="pn-ftable" cellpadding="2" cellspacing="1" border="0" align="left">
<tr>
<td width="15%" class="pn-flabel pn-flabel-h"><span class="pn-frequired">*</span>字段编码:</td>
<td width="85%" class="pn-fcontent">
<input type="text" maxlength="255" id="columncode" name="columncode" size="35" maxlength="255" value="" οnblur="checkInput('columncode');"/>
<span id="columncode_check" class="pn-frequired"></span>
</td>
</tr>
<tr>
<td width="15%" class="pn-flabel pn-flabel-h"><span class="pn-frequired">*</span>字段名称:</td>
<td width="85%" class="pn-fcontent">
<input type="text" maxlength="255" id="columnname" name="columnname" size="35" maxlength="255" value="" οnblur="checkInput('columnname');"//>
<span id="columnname_check" class="pn-frequired"></span>
</td>
</tr>
</table>
</form>
2,JS验证方法:
//验证输入
function checkInput(inputId){
var checkVal = Array();
checkVal[0] = ["displayname", /\S/, "显示名称不能为空!"];
checkVal[1] = ["displayorder", /\S/, "显示顺序不能为空!"];
checkVal[2] = ["columncode", /\S/, "字段编码不能为空!"];
for(var i=0;i<checkVal.length;i++){
if(inputId != ""){
//单个控件验证
var val = document.getElementById(checkVal[i][0]);
var CheckDoc = document.getElementById(checkVal[i][0] + "_check");
if(!checkVal[i][1].test(val.value)){
CheckDoc.innerHTML = checkVal[i][2];
CheckDoc.style.color = "red";
val.focus();
return false;
}else{
CheckDoc.innerHTML = "";
//CheckDoc.style.color = "red";
return true;
}
}else{
//整体提交时验证
var val = document.getElementById(checkVal[i][0]);
var CheckDoc = document.getElementById(checkVal[i][0] + "_check");
if(!checkVal[i][1].test(val.value)){
CheckDoc.innerHTML = checkVal[i][2];
CheckDoc.style.color = "red";
val.focus();
return false;
}else{
CheckDoc.innerHTML = "";
//CheckDoc.style.color = "red";
//return false;
}
}
}
return true;
}
3,提交:
function dosubmit(){
if(checkInput() != true){
return;
}
document.getElementById("form1").submit();
}