Javascript 表单验证项目

我正在为我的公司做一个项目，我们不允许以任何方式修改HTML。已在中设置了一个页面，使用html进行数据验证。页面上有不同形式的验证问题，每个形式都包含自己的“提交”按钮。尽管两个提交按钮具有相同的“id”。有没有办法找出如何隔离每个按钮以对其应用不同的“.onclick”方法。提前感谢。

因此，如果你循序渐进，这是可行的（附带说明：一个HTML文档应该永远不会有多个元素共享相同的

id

tage）

我的解决方案要求您确切地知道页面上有多少

type=“submit”

输入以及输入的顺序，我假设您会这样做，因为您说HTML不能更改

让我们开始吧：

// 1. Get all the inputs on page
var inputs = document.getElementByTagName('input');

// 2. Let's grab only the submit ones
var submits = [];
for(var i = 0; i < inputs.length; i++) {
  if(inputs[i].getAttribute('type') === 'submit') {
    submits.push(inputs[i]);
  }
}

// 3. Add the correct onclick listeners
submits[0].addEventListener("click", onclick1, false); // Button 1
submits[1].addEventListener("click", onclick2, false); // Button 2

// 4. Define the onclick functions
function onclick1(event) {
  // Do something
}

function onclick2(event) {
  // Do something
}

//1。获取页面上的所有输入
var inputs=document.getElementByTagName（“输入”）；
// 2. 让我们只抓取提交的
var=[]；
对于（变量i=0；i

---

上面的内容可以扩展为首先获取每个表单，然后遍历该表单中的输入，但如果您确切知道每个表单的表单数和输入数，则不需要这样做。

您可以使用表单标签“onsubmit”事件，而不是使用按钮事件。我假设表单具有指向唯一位置的操作属性

function validateThing() {
  var input = document.getElementById('input1');
  // return truthy value
  return input.value.length < 6;
}

document.getElementById('form').onsubmit = function(e) {
  var form = e.target;
  var action = form.getAttribute('action');

  // won't submit if one of these returns false
  if (action === '/someurl') {
    return validateThing();
  } else if (action === '/anotherurl') {
    return valideAnotherThing();
  }
}

函数验证（）{
var input=document.getElementById（'input1'）；
//返回真实值
返回input.value.length<6；
}
document.getElementById（'form'）.onsubmit=function（e）{
var form=e.target；
var action=form.getAttribute（'action'）；
//如果其中一个返回值为false，则不会提交
如果（操作=='/someurl'）{
返回validateThing（）；
}else if（action=='/anotherurl'）{
返回有效的其他内容（）；
}
}

您可以使用jquery来侦听对特定类型的单击，然后使用

$（this）

来隔离。一些代码可能会有所帮助