Question

我需要创建一个JavaScript函数，只有在表单中输入三个特定变量时才会运行。

换句话说，我想采用类似这个例子的函数，而不是在first_name字段中只需要“John”，它还需要last_name字段中的“Smith”和“MIT”中的“MIT”。学校“场。

function validateForm (){           
formElement = document.getElementById('myform');
isFormValid = formElement.checkValidity();
if (isFormValid){
var inputElement = document.getElementById('first_name');
var inputValue = inputElement.value
    if (inputValue == 'John'){
        alert ("Blahblahblah"); 
        }
    }
}

我想最终我想添加三个元素，以便inputValue =“JohnSmithMIT”，因此可以验证所有三个变量。

我试过这个无济于事：

function validateForm (){           
formElement = document.getElementById('myform');
isFormValid = formElement.checkValidity();
if (isFormValid){
var inputElement = document.getElementById('first_name')+('last_name')+('school');
var inputValue = inputElement.value
    if (inputValue == 'JohnSmithMIT'){
        alert ("Blahblahblah"); 
        }
    }
}

我对此很新，任何帮助都会受到赞赏。谢谢。

Answer 1

var inputElement = document.getElementById('first_name')+('last_name')+('school');

getElementById是文档对象的一个方法因此，您必须调用它3次才能获得这三个值。上面这一行的含义是：

    var inputElement = document.getElementById('first_name')+toString('last_name')+toString('school');

或“John”+“last_name”+“school”

当然，这种方法本身并不是正确的方法，因为当时约翰斯的思想也会引发警报。

function validateForm (){           
formElement = document.getElementById('myform');
isFormValid = formElement.checkValidity();
if (isFormValid){
var firstName = document.getElementById('first_name').value;
  var lastName = document.getElementById('last_name').value;
  var schoolName = document.getElementById('school_name').value;
  

    if (firstName == 'John' && lastName == "Smith" && schoolName=="MIT"){
        alert ("Blahblahblah"); 
        }
    }
}

Answer 2

document对象内置了一些集合，例如document.frames和document.forms。对于其中的每一个，您可以访问具有名称或ID的各个元素。除此之外，每个表单元素都是其输入元素的集合，并且每个表单元素都可以以相同的方式访问。

以下是与HTML一起使用的可视化示例：

function showVals() {
  var myform = document.forms.myform;
  alert("Number of forms: " + document.forms.length
        + "\nNumber of fields: " + myform.length
        + "\nFirst Name: " + myform.first_name.value
        + "\nLast Name: " + myform.last_name.value
        + "\nSchool: " + myform.school.value
        + "\nLast Input Type: " + myform[myform.length - 1].type);
}

<form id="myform">
  First Name: <input name="first_name" />
  Last Name: <input name="last_name" />
  <br />Current School: <input name="school" />
  <input type="submit" value="Display Values" onclick="showVals()" />
</form>

正如您所看到的，它更加简洁。您将遇到的唯一问题是ID /名称中包含-等JavaScript运算符，并且在这些情况下您无法使用点运算符（即。myform.last-name将无效，但是myform['last-name']会。）

您完成的代码看起来像这样：

function validateForm (){           
    var form = document.forms.myform;
    var values = form.first_name.value + form.last_name.value + form.school.value;
    if (values == 'JohnSmithMIT'){
        alert("Blahblahblah"); 
    }
}

Answer 3

标准JavaScript不喜欢像这样链接命令

var inputElement = document.getElementById('first_name')+('last_name')+('school');

您可以在分别获取所有值后附加它们。

var firstName = document.getElementById('first_name').value;
var lastName = document.getElementById('last_name').value;
var schoolName = document.getElementById('school_name').value;
var validationStr = firstName + lastName + schoolName;
if (validationStr=='JohnSmithMIT'){
    alert ("Validate Form B is Valid"); 
}

或像PC3TJ一样单独检查每个值，我建议这是最好的方法。

var firstName = document.getElementById('first_name').value;
var lastName = document.getElementById('last_name').value;
var schoolName = document.getElementById('school_name').value;
if (firstName=='John' && lastName=='Smith' && schoolName=='MIT'){
    alert ("Validate Form A is Valid"); 
}

jsFiddle：http://jsfiddle.net/DJRavine/we7yo03k/

Javascript If语句验证三种不同的表单值？

3 个答案: