Question

我必须制作一个页面，其中有3种形式，但只能显示一种形式。同样，这些表格不应该被连接。例如，如果我要在所有三个表格中进行某种形式的验证，则只有我使用的一个应该对验证代码作出响应，而其他代码应该保持空闲状态，直到我切换表格并使用它为止。我必须没有框架，纯文本，JS或PHP，HTML和CSS。

我有一个页面，我可以在其中切换表单，显示1，隐藏2。但是，我做了一个验证类，它正在验证所有3种形式，因为我未使用的2种形式只是隐藏的，没有被禁用，所以这是行不通的。

任何人都知道我如何制作这些表格，因此它们将彼此独立吗？我的意思是，他们将如何编写此代码，而不考虑我的代码。我想重做它，然后在上面添加其他内容。

Answer 1

如果我的推论对给出的少量信息是正确的，那么这可能就是您要寻找的

const 
  Bt_SwitchForm = document.getElementById("Switch-Form"),
  FormX_Count   = 3;

var
  formActiv = 0,
  formX     = {};

function formX_Submit(e) {
  e.preventDefault()
  console.log('formX_Submit on =', this.id )
}

document.querySelectorAll('form').forEach( (elm, Item)=>
{
  formX[elm.id] = { 'f' : elm, 'ref': Item }
  elm.onsubmit  = formX_Submit;
});


Bt_SwitchForm.onclick=()=>{
  formActiv = ++formActiv % FormX_Count;
  for(let elm in formX) {
    formX[elm].f.className = formX[elm].ref===formActiv ? '': 'form_Off'
  };
}

form {
  display: block;
  padding: 20px;
  border: 1px solid grey;
  width  : 200px;
}
form.form_Off { display : none }
button { margin: 10px}

<form id="form1" class="">
  <input type="text" id="inputTxt1" value="" placeholder="input form 1" >
  <button type="submit">submit</button>
  <button type="rest">reset</button>
</form>
<form id="form2" class="form_Off">
  <input type="text" id="inputTxt1" value="" placeholder="input form 2" >
  <button type="submit">submit</button>
  <button type="rest">reset</button>
</form>
<form id="form3" class="form_Off">
  <input type="text" id="inputTxt3" value="" placeholder="input form 3" >
  <button type="submit">submit</button>
  <button type="rest">reset</button>
</form>

<button id="Switch-Form">Switch Form</button>

我认为解释这个代码对我没有用，因为您似乎具有很强的演绎能力。 ;）

如何使用类型切换器按钮动态地进行表单切换

1 个答案: