我正在尝试进行javascript表单验证，为此我需要调用两个函数。一个用于密码，另一个用于用户名（我还需要稍后再打电话）。
这是我的JS代码：
function validateUserName(NewUser)
{
var u = document.forms["NewUser"]["user"].value
var uLength = u.length;
var illegalChars = /\W/; // allow letters, numbers, and underscores
if (u == null || u == "")
{
alert("You left Username field empty");
return false;
}
else if (uLength <4 || uLength > 11)
{
alert("The Username must be between 4 and 11 characters");
return fasle;
}
else if (illegalChars.test(u))
{
alert("The username contains illegal characters");
return false;
}
else
{
return true;
}
}
function validatePassword(pwd, confirmPwd)
{
var p = document.forms["NewUser"]["pwd"].value
var cP = document.forms["NewUser"]["cP"].value
var pLength = p.length;
if (p == null || p == "")
{
alert("You left the password field empty");
return false;
}
else if (pLength < 6 || pLength > 20)
{
alert("Your password must be between 6 and 20 characters in length");
return false;
}
else if (p != cP)
{
alert("Th passwords do not match!");
return false;
}
}
这是我的HTML表单：
<form name = "NewUser" onsubmit= "return validateUserName(), return validatePassword()" action = "">
<tr>
<td>Username:</td>
<td><input type = "text" name = "user"/></td>
</tr>
<tr>
<td class = "Information"><em>Must be 4-11 characters.<br/>Only numbers, letters and underscores.</em></td>
</tr>
<tr>
<td>Password:</td>
<td><input type = "password" name = "pwd"/></td>
<tr>
<td class = "Information"><em>6-20 characters</em></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type = "password" name = "confirmPwd"/></td>
<tr>
<td class = "Information"><em>just in case you didn't make mistakes!</em></td>
</tr>
<input type = "submit" value = "Submit"/>
请忽略表格代码。
我宁愿把它全部放在一个功能中吗？或者有没有办法一次调用两个函数？
答案 0 :(得分：8)
您有多种方法可以解决此问题，您当前设置最简单的方法是：
以下将运行这两个函数，无论每次返回什么状态，因为它们不作为逻辑表达式的一部分内联执行，当获取错误值时将“短路”：
function validateForm(){
var validation = true;
validation &= validateUserName();
validation &= validatePassword();
return validation;
}
然后在表单标记中：
<form onsubmit="return validateForm()">
如果为了制作更多可重用的代码，可能是可取的，修改验证函数以便它们接受form参数。这意味着您可以执行以下操作：
<form onsubmit="return validateForm(this);">
..让您的接收功能执行以下操作：
function validateForm(form){
var validation = true;
validation &= validateUserName(form);
validation &= validatePassword(form);
return validation;
}
您还可以通过应用事件侦听器的首选方式实现此目的，即使用addEventListener而不是html属性onsubmit：
/// wait for window load readiness
window.addEventListener('load', function(){
/// you could improve the way you target your form, this is just a quick eg.
var form;
form = document.getElementsByTagName('form')[0];
form.addEventListener('submit', validateUserName);
form.addEventListener('submit', validatePassword);
});
以上假设需要支持现代浏览器。如果您希望支持旧版本的Internet Explorer，最好使用函数来应用事件处理，例如：
function addEventListener( elm, evname, callback ){
if ( elm.addEventListener ) {
elm.addEventListener(evname, callback);
}
else if ( elm.attachEvent ) {
elm.attachEvent('on'+evname, callback);
}
}
这第二个选项使得对获得验证的内容，地点，时间和顺序进行全局控制变得更加困难，因此我建议使用第一个选项。不过，我建议至少使用上面的JavaScript方法应用您的单一submit处理程序，而不是使用onsubmit=""。
答案 1 :(得分：4)
只需将两者与逻辑AND运算符组合在一起：
<form name="NewUser" onsubmit="return validateUserName() && validatePassword();" action="">
<tr>
<td>Username:</td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td class="Information"><em>Must be 4-11 characters.<br/>Only numbers, letters and underscores.</em></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="pwd"/></td>
<tr>
<td class="Information"><em>6-20 characters</em></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" name="confirmPwd"/></td>
</tr>
<tr>
<td class="Information"><em>just in case you didn't make mistakes!</em></td>
</tr>
<input type="submit" value="Submit"/>
</form>答案 2 :(得分：1)
有一些方法可以解决这个问题。一种是创建一个函数，例如submitForm（），然后调用另外两个函数。也许使用这些函数调用作为if语句的一部分来提供客户端验证。
另一种方法是覆盖表单的默认提交功能，而是根据需要调用函数。 jQuery为此提供了一种简单的方法。有关详细信息，请查看http://api.jquery.com/submit/。
理想情况下，validateUser()和validatePassword()函数会合并到一个函数validateUser()中。如果您遇到困难，您可能需要提供当前功能的代码以获取有关如何执行此操作的建议...
希望这会有所帮助：）
答案 3 :(得分：0)
创建一个函数来调用所有验证器：
function validate() {
return validateUserName() && validatePassword();
}
HTML
<form name="NewUser" onsubmit="return validate()" action="">
同样在您的密码验证功能中，您会引用错误的字段名称。
固定代码：http://jsfiddle.net/6sB29/
如果您想提醒所有错误（不仅是第一个），您可以尝试这样的事情：
function validate() {
var name = validateUserName(),
pass = validatePassword();
return name && pass;
}
答案 4 :(得分：0)
为什么你要创建两个不同的功能来验证用户名和密码，你可以这样做，如下所示：
创建另外三个函数，其中这两个函数必须调用并检查两者是否都返回true然后返回true，否则显示消息或您想要做的任何事情。
以下是您可以执行此操作的代码：
function validateUserName(NewUser) {
var u = document.forms["NewUser"]["user"].value
var uLength = u.length;
var illegalChars = /\W/; // allow letters, numbers, and underscores
if (u == null || u == "") {
alert("You left Username field empty");
return false;
}
else if (uLength < 4 || uLength > 11) {
alert("The Username must be between 4 and 11 characters");
return fasle;
}
else if (illegalChars.test(u)) {
alert("The username contains illegal characters");
return false;
}
else {
return true;
}
}
function validatePassword(pwd, confirmPwd) {
var p = document.forms["NewUser"]["pwd"].value
var cP = document.forms["NewUser"]["cP"].value
var pLength = p.length;
if (p == null || p == "") {
alert("You left the password field empty");
return false;
}
else if (pLength < 6 || pLength > 20) {
alert("Your password must be between 6 and 20 characters in length");
return false;
}
else if (p != cP) {
alert("Th passwords do not match!");
return false;
}
}
function finalvalidate() {
var newuser = $('[id$=newuser]').val();
var usernameresult = validateUserName(newuser);
var pwd = $('[id$=pwd]').val();
var confirmPwd = $('[id$=confirmPwd]').val();
var pwdresult = validatePassword(pwd, confirmPwd);
if (usernameresult == true && pwdresult == true) {
return true;
} else {
return false;
}
}
希望这对你有用..
答案 5 :(得分：0)
试试这个
onsubmit="return fun2() && fun3();"