[英]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/; // 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"/>
请忽略表格代码。
我应该把它全部放在一个功能中吗? 或者有没有办法一次调用两个函数?
您有多种方法可以解决此问题,您当前设置最简单的方法是:
无论每次返回什么状态,以下都将运行这两个函数,因为它们不是作为逻辑表达式的一部分内联执行的,当获取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
而不是onsubmit
上的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=""
。
只需将两者与逻辑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>
有几种方法可以解决这个问题。 一种是创建一个函数,例如submitForm(),然后调用另外两个函数。 也许使用这些函数调用作为if
语句的一部分来提供客户端验证。
另一种方法是覆盖表单的默认提交功能,而是根据需要调用函数。 jQuery为此提供了一种简单的方法。 有关更多信息,请查看http://api.jquery.com/submit/ 。
理想情况下, validateUser()
和validatePassword()
函数将合并到一个函数validateUser()
。 如果您遇到困难,您可能需要提供当前功能的代码以获取有关如何执行此操作的建议...
希望这可以帮助 :)
创建一个函数来调用所有验证器:
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;
}
为什么要创建两个不同的函数来验证用户名和密码,顺便说一句,你可以使用下面的方法:
创建另外三个函数,其中这两个函数必须调用并检查两者是否都返回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;
}
}
希望这对你有用..
尝试这个
onsubmit="return fun2() && fun3();"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.