Javascript 如何在表单提交中调用两个函数

我正在尝试进行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;
    }
}

函数validateUserName（新用户）
{
var u=document.forms[“NewUser”][“user”].value
var uLength=u.长度；
var illegalChars=/\W//；//允许使用字母、数字和下划线
如果（u==null | | u==“”）
{
警报（“您将用户名字段留空”）；
返回false；
}
否则，如果（U长度11）
{
警报（“用户名必须介于4到11个字符之间”）；
返回方式；
}
else if（非法字符测试（u））
{
警报（“用户名包含非法字符”）；
返回false；
}
其他的
{
返回true；
}
}
函数validatePassword（pwd，confirmPwd）
{
var p=document.forms[“NewUser”][“pwd”].value
var cP=document.forms[“NewUser”][“cP”].value
var pLength=p.长度；
如果（p==null | | p==“”）
{
警报（“您将密码字段留空”）；
返回false；
}
否则，如果（增压<6 | |增压>20）
{
警报（“您的密码长度必须介于6到20个字符之间”）；
返回false；
}
否则如果（p！=cP）
{
警报（“密码不匹配！”）；
返回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"/>

用户名：
必须为4-11个字符。
仅限数字、字母和下划线。
密码：
6-20个字符
确认密码：
以防万一你没有犯错误！

请忽略表代码

---

我应该把它全部放在一个函数中吗？或者有一种方法可以同时调用两个函数吗？

只需将这两个函数与逻辑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>

用户名：
必须为4-11个字符。
仅限数字、字母和下划线。
密码：
6-20个字符
确认密码：
以防万一你没有犯错误！

您有多种方法可以实现此目的，当前设置最简单的方法是：

组合函数 无论每次返回什么状态，以下两个函数都将运行，因为它们不是作为逻辑表达式的一部分内联执行的，当获取假值时，逻辑表达式将“短路”：

function validateForm(){
  var validation = true;
  validation &= validateUserName();
  validation &= validatePassword();
  return validation;
}

然后在表单标记中：

<form onsubmit="return validateForm()">

。。并让您的接收功能执行以下操作：

<form onsubmit="return validateForm(this);">

function validateForm(form){
  var validation = true;
  validation &= validateUserName(form);
  validation &= validatePassword(form);
  return validation;
}

添加多个事件 您还可以通过应用事件侦听器的首选方式来实现这一点，即使用

addEventListener

而不是submit上的html属性

：

/// 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=“”
，有几种方法可以做到这一点。一种方法是创建一个函数，比如submitForm（），然后调用另外两个函数。也许将这些函数调用作为
if
语句的一部分来提供客户端验证

另一种方法是重写表单的默认提交功能，并根据需要调用这些功能。jQuery为此提供了一种简单的方法。有关更多信息，请查看

理想情况下，
validateUser（）
和
validatePassword（）
函数将合并为一个函数
validateUser（）
。如果你被卡住了，你可能想提供你当前函数的代码，以获得如何做的建议

希望这有帮助：）
创建一个函数来调用所有验证器：

function validate() {
    return validateUserName() && validatePassword();
}

HTML

为什么要创建两个不同的函数来验证用户名和密码，顺便说一下，您也可以这样做，如下所示：

创建另一个第三个函数，在该函数中，这两个函数必须调用并检查两者是否都返回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;
        }
    }

函数validateUserName（新用户）{
var u=document.forms[“NewUser”][“user”].value
var uLength=u.长度；
var illegalChars=/\W//；//允许使用字母、数字和下划线
如果（u==null | | u==“”）{
警报（“您将用户名字段留空”）；
返回false；
}
否则如果（U长度<4 | | U长度>11）{
警报（“用户名必须介于4到11个字符之间”）；
返回方式；
}
else if（非法字符测试（u））{
警报（“用户名包含非法字符”）；
返回false；
}
否则{
返回true；
}
}
函数validatePassword（pwd，confirmPwd）{
var p=document.forms[“NewUser”][“pwd”].value
var cP=document.forms[“NewUser”][“cP”].value
var pLength=p.长度；
如果（p==null | | p==“”）{
警报（“您将密码字段留空”）；
返回false；
}
否则，如果（增压<6 | |增压>20）{
警报（“您的密码长度必须介于6到20个字符之间”）；
返回false；
}
function validate() {
    var name = validateUserName(),
        pass = validatePassword();   
    return name && pass;
}

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;
        }
    }

onsubmit="return fun2() && fun3();"