如何在表单提交上调用两个函数
Posted
技术标签:
【中文标题】如何在表单提交上调用两个函数【英文标题】：How to call two functions on a form submit 【发布时间】：2013-04-21 11:34:34 【问题描述】：我正在尝试进行 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"/>
请忽略表格代码。
我应该将它们全部放在一个函数中吗？或者有没有办法一次调用两个函数？
【问题讨论】：
put it all in one function
有几个功能没关系，因为它更容易维护。但是，您应该创建一个调用其他两个函数的单个函数。
你自己回答了这个问题。将所有功能放在一个功能中。只需调用名为 ValidateData 的常用函数并将所有内容放在一起
+1 丹尼B。结合功能绝对是解决问题的最糟糕的方法。
【参考方案1】：
只需将两者与逻辑 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>【讨论】：
我试过了，但它只运行了用户名验证器。我的 JS 可能有问题吗？ 逻辑运算符的工作原理如下：如果第一个操作数为假，它不会打扰另一个，因为结果无论如何都是假的。如果 validateUserName() 为真，那么它将继续使用 validatePassword()。编辑：检查 pebbl 的答案。看起来正是您所需要的。 我正在使用您的代码进行验证，就像桃子一样工作。【参考方案2】：您有多种方法可以解决这个问题，您当前的设置最简单的是：
组合功能
无论每次返回什么状态，以下函数都将运行这两个函数，因为它们不是作为逻辑表达式的一部分内联执行，当得到一个错误值时，逻辑表达式会“短路”：
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=""。
【讨论】：
【参考方案3】：有几种方法可以解决这个问题。一种是创建一个函数，例如 submitForm() ，然后调用您的其他两个函数。也许使用这些函数调用作为if 语句的一部分来提供客户端验证。
另一种方法是覆盖表单的默认提交功能，而是调用您认为合适的函数。 jQuery 为此提供了一种简单的方法。请查看http://api.jquery.com/submit/ 了解更多信息。
理想情况下，validateUser() 和 validatePassword() 函数将合并为一个函数 validateUser()。如果遇到困难，您可能需要提供当前函数的代码以获取有关如何执行此操作的建议...
希望这会有所帮助:)
【讨论】：
我的 JS 函数在我原来的问题中 :)【参考方案4】：创建一个函数来调用所有验证器：
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;
http://jsfiddle.net/6sB29/1/
【讨论】：
@Qantas94Heavy 当然，但是当前的 OP 方法（使用警报）使得验证在第一个错误时停止是很合乎逻辑的。【参考方案5】：为什么你要创建两个不同的函数来验证用户名和密码，顺便说一下，你也可以像下面这样：
创建另一个第三个函数，这两个函数必须调用并检查是否都返回 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;
希望这对你有用..
【讨论】：
【参考方案6】：试试这个
onsubmit="return fun2() && fun3();"
【讨论】：
以上是关于如何在表单提交上调用两个函数的主要内容，如果未能解决你的问题，请参考以下文章