如何在表单提交中调用两个函数 [英] How to call two functions on a form submit
问题描述
我正在尝试做javascript表单验证，为此我需要调用两个函数。一个用于密码和用户名（我还需要稍后再打电话）。
这是我的JS代码：
function validateUserName（NewUser）
{
var u = document.forms [NewUser] [user]。value
var uLength = u.length;
var illegalChars = / \W /; //允许字母，数字和下划线
if（u == null || u ==）
{
alert（Your left Username field empty）;
返回false;
}
else if（uLength< 4 || uLength> 11）
{
alert（用户名必须在4到11个字符之间）;
返回fasle;
else if（illegalChars.test（u））
{
alert（用户名包含非法字符）;
返回false;
}
else
{
return true;
函数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）;
返回false;
}
else if（pLength< 6 || pLength> 20）
{
alert（您的密码长度必须在6到20个字符之间）;
返回false;
else if（p！= cP）
{
alert（Th passwords not match！）;
返回false;
}
}
这里是我的HTML表单：
< form name =NewUseronsubmit =return validateUserName（），return validatePassword（）action =>
< tr>
< td>使用者名称：< / td>
< td>< input type =textname =user/>< / td>
< / tr>
< tr>
< td class =信息>< em>必须为4-11个字符< /仅限数字，字母和下划线< / em>< / td>
< / tr>
< tr>
< td>密码：< / td>
< td>< input type =passwordname =pwd/>< / td>
< tr>
< td class =Information>< em> 6-20个字元< / em>< / td>
< / tr>
< tr>
< td>确认密码：< / td>
< td>< input type =passwordname =confirmPwd/>< / td>
< tr>
< td class =信息>< em>以防万一您没有犯错！< / em>< / td>
< / tr>
< input type =submitvalue =Submit/>
请忽略表格代码。
我应该把它放在一个函数中吗？或者有没有办法一次调用两个函数？
您有多种方法来处理这个问题，设置为：
$ b $ h3>组合函数
无论返回哪个状态，以下都将运行这两个函数时间，因为它们并不是作为逻辑表达式的一部分内联执行的，当得到一个错误值时它将短路：
函数validateForm（）{
var validation = true;
validation& = validateUserName（）;
validation& = validatePassword（）;
返回验证;
}
然后在您的表单标记中：
< form onsubmit =return validateForm（）>
如果可能是明智的，为了制作更多可重用的代码，可以修改您的验证函数他们接受 form 参数。这意味着您可以执行以下操作：
< form onsubmit =return validateForm（this）;>
..并让您的接收功能执行以下操作：
函数validateForm（form）{
var validation = true;
validation& = validateUserName（form）;
validation& = validatePassword（form）;
返回验证;
$ / code $ / pre
$ b $ h3添加多个事件
你也可以通过应用事件监听器的首选方式实现这一点，即使用 addEventListener 代替html属性 onsubmit ：
$ $ p $ ///等待窗口加载准备就绪
window.addEventListener（'load'，function（） {
///你可以改进你定位表单的方式，这只是一个快速例如
var form;
form = document.getElementsByTagName（'form'）[0];
form.addEventListener（'submit'，validateUserName）;
form.addEventListener（'submit'，validatePassword）;
}）;
以上假设需要支持现代浏览器。如果您希望支持Internet Explorer的旧版本，则最好使用一个函数来应用您的事件处理，例如：
函数addEventListener（elm，evname，callback）{
if（elm.addEventListener）{
elm.addEventListener（evname，callback）;
}
else if（elm.attachEvent）{
elm.attachEvent（'on'+ evname，callback）;
$ / code> 第二个选项使得难以发挥全局控制在什么地方得到验证，在哪里，何时以什么顺序，所以我建议第一个选项。不过，我也会推荐至少应用上面的JavaScript方法来使用单个提交处理程序，而不是使用 onsubmit =。
I am trying to do javascript form validation, and to do this I need to call two functions. One for the password and on for the username (I will also need to call more later on).
Here is my JS code:
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;
}
}
and here is my HTML form:
<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"/>
Please ignore the table code.
Should I rather just put it all in one function? Or is there a way to call two functions at once?
You have multiple ways of approaching this, the easiest for your current set up would be:
combined function
The following will run both functions no matter what state is returned each time, because they are not executed inline as part of a logical expression which will "short circuit" when getting a false value:
function validateForm(){
var validation = true;
validation &= validateUserName();
validation &= validatePassword();
return validation;
}
And then in your form markup:
<form onsubmit="return validateForm()">
If would probably be advisable, in the interests of making more reusable code, to modify your validation functions so that they accept a form argument. This would mean you could do the following:
<form onsubmit="return validateForm(this);">
.. and have your receiving function do the following:
function validateForm(form){
var validation = true;
validation &= validateUserName(form);
validation &= validatePassword(form);
return validation;
}
add multiple events
You could also implement this via the preferred way of applying event listeners which is to use addEventListener instead of the html attribute 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);
});
The above assumes that it's required to support modern browsers. If you wish to support older versions of internet explorer you'd be better off making a function to apply your event handling e.g:
function addEventListener( elm, evname, callback ){
if ( elm.addEventListener ) {
elm.addEventListener(evname, callback);
}
else if ( elm.attachEvent ) {
elm.attachEvent('on'+evname, callback);
}
}
This second option makes it harder to exert a global control over what gets validated, where, when and in what order, so I'd recommend the first option. However I'd would also recommend at least applying your singular submit handler using the JavaScript method above, rather than using onsubmit="".
这篇关于如何在表单提交中调用两个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
