将jQuery翻译为纯javascript

Question

我必须修复一些表单验证，但主机页面中没有包含jQuery。我通常会做这样的事情...

if ($("#contactNameAdd").val() !== '' || $("#contactPhoneAdd").val() !== '') { 
    $("#contactForm").show() 
}; 

我怎么能重写在正常的js？

Answer 1

var name = document.getElementById("contactNameAdd"); 
var phone = document.getElementById("contactPhoneAdd"); 
var form = document.getElementById("contactForm"); 

if(name.value != '' || phone.value != '') { 
    form.style.display = "block"; 
} 

Answer 2

if (document.getElemenById('contactNameAdd').value != '' || document.getElementById('contactPhoneAdd').value != '') { 
    document.getElementById('contactForm').style.display = 'block'; 
} 

试试这个 - 检查2倍的值，然后改变 '联系形式'

Answer 3

if (document.getElementById('contactNameAdd').value !== '' || document.getElementById('contactPhoneAdd').value !== '') { 
    document.getElementById('contactForm').style.display = 'block'; 
} 

在普通的JavaScript，您使用document.getElementById('id')获得DOM的将style.display属性基于节点id属性。您使用DOM输入元素上的.value来获取其值。并且您在任何DOM元素上使用.style来设置CSS属性。在这种情况下，“show”的意思是“display：block;”。

Answer 4

这应该可以做到。

var contactNameAdd = document.getElementById("contactNameAdd"); 
var contactPhoneAdd = document.getElementById("contactPhoneAdd"); 

if((contactNameAdd !== null && contactNameAdd.value !== '') || (contactPhoneAdd !== null && contactPhoneAdd.value !== '')) 
{ 
    document.getElementById("contactForm").style.display = 'block'; 
} 

Answer 5

var contactName = document.getElementById('contactNameAdd'); 
var contactPhone = document.getElementById('contactPhoneAdd'); 
if(contactName.value !== '' || contactPhone.value !== '') { 
    // Different as JQuery, there will be no animation. 
    // I assume you use 'display:none' to hide the form. 
    var form = document.getElementById('contactForm'); 
    form.style.display = 'block'; 
}