例子，js控制表单提交的代码。
复制代码 代码示例:
<script type="text/
javascript">
function checkImage(){
var imageValue = document.getElementById("actorCard:imageField:image").value;
if(imageValue !== ""){
document.getElementById("actorCard").sumbit();
}else if(imageValue == ""){
alert("image field
required !");
document.getElementById("actorCard:imageField:image").focus();
return false;
}
}
</script>
以上代码没有问题，但是漏了这点:当用户输入一个或者多个空格时，它也可以通过验证的。
要加上这句话了:fieldValue = fieldValue.replace(/s/gi,"");来把空格的情况去除掉。(在var定义的变量之后加上)
按钮的代码：
复制代码 代码示例:
<h:commandButton id="save" value="Save"
onclick="return checkImage()" action="#{actorCardHome.persist}"
disabled="#{!actorCardHome.wired}"
rendered="#{!actorCardHome.managed}" />
说明：
1)在按钮的事件onclick="return checkImage()",而不是onclick="checkImage()"，否则达不到效果它同样会提交表单。
2) JS的判断空值和非空值这样来写：
if(imageValue !== "") 和 if(imageValue == "")
3)我这里的id可能是比较特殊的，因为我的是JSF的页面，所以要看源代码才可以知道id。
4)document.getElementById("actorCard:imageField:image").focus();这一句重新定位到那个必须填的字段的位置。这句比较好。特别提醒的是：这句后面的return false;如果没有它的话表单同样会提交，所以一定要记得把这句加上。
上面的代码已很完善了，但再看时又有些遗漏的地方，所以把它补充完整。
1. signin.jsp
复制代码 代码示例:
<script type="text/javascript" src="js/common.js"></script>
<s:form name="loginForm" action="./openid.servlet" method="post">
<table>
<tr>
<td align="right">Username:</td>
<td align="left">
<input type="text" id="username" name="username" value="" class="joinField"><br />
<span id="error_username"></span>
</td>
</tr>
<tr>
<td align="right">Password:</td>
<td align="left">
<input type="password" id="password" name="password" value="" class="joinField"><br />
<span id="error_password"></span></td>
</tr>
<tr>
<td align="right">
<input type="submit" id="loginButton" onclick="return checkField();" value="login" class="btn-submit">
</td>
<td align="left"><br />
<span id="error_login" class="error"></span></td>
</tr>
</table>
</s:form>
说明三点：
(1)这一句：<input type="submit" id="loginButton" onclick="return checkField();" value="login">里面的type="submit",非常重要，由于当时种种原因我不小心写成了type="button",所以导致执行在执行JS时总是提交不了。document.getElementById("loginForm").sumbit(); 这句是JS的提交代码。
(2)document.getElementById("loginForm").sumbit(); 这里的loginForm是指的是form表单的ID号而不是"提交按钮"的ID号，这里一定要注意。
(3)document.getElementById("error_username").innerHTML = "username is not null !";
这里的"error_username"指的是ID哦，因为我当时在原有的代码上改没注意它当时是class，然后就报错！
2. common.js
复制代码 代码示例:
function checkField(){
var usernameValue = document.getElementById("username").value;
var passwordValue = document.getElementById("password").value;
usernameValue = usernameValue.replace(/s/gi,"");
passwordValue = passwordValue.replace(/s/gi,"");
if(usernameValue !== "" && passwordValue !== ""){
这里不能写下面那个语句，如果写了后会提交form表单2次。而应该直接写return true;就可以了。切记！！
//document.getElementById("loginForm").submit();
return true;
}else if(usernameValue == "" && passwordValue == ""){
document.getElementById("error_username").innerHTML = "username is not null !";
document.getElementById("error_password").innerHTML = "password is not null !";
return false;
}else if(usernameValue !== "" && passwordValue == ""){
document.getElementById("password").focus();
document.getElementById("error_username").innerHTML = "";
document.getElementById("error_password").innerHTML = "password is not null !";
return false;
}else if(passwordValue !== "" && usernameValue == ""){
document.getElementById("username").focus();
document.getElementById("error_password").innerHTML = "";
document.getElementById("error_username").innerHTML = "username is not null !";
return false;
}
}
