调用所有函数提交表单

Question

我是JavaScript的新手，正在寻找如何在单击按钮时验证表单的方法，但是我的脚本不断跳转到第一个函数validate，名称保持突出显示，我不知道要在clear all函数中添加什么内容，因此它会跳转到下一个未验证的项目

function validate_form(form)
{
    var complete=false;

    if(complete)
    {
        clear_all();
        complete = checkUsernameForLength(form.username.value);
    }
    if(complete)
    {
        clear_all();
        complete = checkaddress(form.address.value);
    }
    if(complete)
    {
        clear_all();
        complete = checkaddress(form.address.value);
    }

    if (complete)
    {
        clear_all();
        complete = checkphone(form.phone.value);
    }
    if (complete)
    {
        clear_all();
        complete = checkEmail(email.phone.value);
    }
}

function clear_all()
{
    document.getElementById('usernamehint').style.visibility= 'hidden';
    document.basicform.username.style.backgroundColor='white';
    document.getElementById("countryhint").style.visibility= 'hidden';
    document.basicform.country.style.backgroundColor='white';
    document.getElementById("").style.visibility= 'hidden';
    document.basicformm.address.style.backgroundColor='white';
    document.getElementById("").style.visibility= 'hidden';
    document.basicform.phone.style.backgroundColor='white';
    document.getElementById("").style.visibility= 'hidden';
    document.basicform.email.style.backgroundColor='white';
}

function checkUsernameForLength(whatYouTyped)
{
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 2) {
        fieldset.className = "welldone";
        return true;
    } else {
        fieldset.className = "";
        return false;
    }
}

function checkEmail(whatYouTyped) 
{
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) {
        fieldset.className = "welldone";
    } else {
        fieldset.className = "";
    }
}



function checkaddress(whatYouTyped)
 {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 3 && txt.length <10) {
        fieldset.className = "welldone";
    }
     else {
        fieldset.className = "";
    }
}



function checkphone(whatYouTyped)
 {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
 if ( /^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/.test(txt)) {
        fieldset.className = "welldone";
    }
 else
 {
        fieldset.className = "";
    }
}



function addLoadEvent(func) 
{
  var oldonload = window.onload;
  if (typeof window.onload != 'function') 
{
    window.onload = func;
  }
 else
 {
    window.onload = function()
 {
      oldonload();
      func();
    }
  }
}


function prepareInputsForHints() 
{
  var inputs = document.getElementsByTagName("input");
  for (var i=0; i<inputs.length; i++)
{
    inputs[i].onfocus = function () 
{
      this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
    }
    inputs[i].onblur = function () 
{
      this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
}

Answer 1

function checkUsernameForLength(name, callback) {
    if (error) {
        return [null, error];
    }
    return [name, null]
}
var series = function(funcs, success, error) {
    var results = errors = [];
    for (var i in funcs) {
        var result = funcs[i]();
        results.push(result[0]);
        errors.push(result[1]);
        if (result[1]) {
            return error(results, errors);
        }
    }
    return success(results);
}
series([
    function() {
        return checkUsernameForLength(form.username.value);
    }
], function(results) {
    form.submit();
}, function(results, errors) {
    alert(errors.join("\n"));
});

系列调用每个验证函数，如果传递了一些错误，则停止执行。 如果不是错误，则调用错误或成功函数。

PS。 这是学习javascript的正确方法。 如果您想很好地了解javascript，就不应使用jQuery之类的糖。

Answer 2

我可以推荐以下方法：

您具有以下形式的验证器功能列表

{ // map of ids : validators
    name: function(formElement) {..., return 'Cannot be all lowercase' or return 'Other error'}, 
    email: function(formElement) {...}, 
    ...
}

每个验证器函数均返回错误消息，如果没有问题，则不返回任何消息（未定义）。

然后在id：validator对上使用$ .each，您会执行类似的操作（代码可能有错误）：

$(id).bind(
    'change', //?
    function () {
        // Called when user changes form elements, you can use an alert, or better
        // something not annoying like...
        $(id).css({'background-color':'yellow'})
        $(id+'-error').get(0).innerHtml = validator(id);
    }
)

这种方法的优势在于，用户将一次而不是一次看到所有错误。

另外，每当用户点击提交时，您就可以执行$ .map或$ .each之类的操作来运行所有验证器功能，并进行适当的投诉。

还要注意，您不能依靠客户端代码来验证您的表单，因为对于用户或黑客来说，禁用或忽略您的验证代码并将他们想要的任何值发送到服务器都是很简单的。 但是，客户端验证代码对于平稳响应的用户体验非常有用。

Answer 3

我检查了您的代码，并得到了代码的主要问题：这是验证的一部分：

    complete = checkUsernameForLength(form.username.value);
}
if(complete)

……

function checkUsernameForLength(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 2) {
        fieldset.className = "welldone";
    }
    else {
        fieldset.className = "fail";
    }
}

问题是checkUsernameForLength不返回值，所以complete没有值。 您应该将功能代码更改为：

function checkUsernameForLength(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 2) {
        fieldset.className = "welldone";
        return true;
    } else {
        fieldset.className = "fail";
        return false;
    }
}

在这种情况下

complete = checkUsernameForLength(form.username.value);

如果没有错误或某些错误，将具有true或false值。 并且它将停止执行验证