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

Question

我正在尝试进行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"/>

请忽略表格代码.

我应该把它全部放在一个功能中吗？或者有没有办法一次调用两个函数？

Answer 1

您有多种方法可以解决此问题,您当前设置最简单的方法是:

综合功能

无论每次返回什么状态,以下都将运行这两个函数,因为它们不是作为逻辑表达式的一部分内联执行的,当获取false值时它将"短路":

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

第二个选项使得对验证的内容,地点,时间和顺序进行全局控制变得更加困难,因此我建议使用第一个选项.但是我也建议至少submit使用上面的JavaScript方法应用你的单一处理程序,而不是使用onsubmit="".

Answer 2

只需将两者与逻辑 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>