Question

我是JavaScript的新手，我正在研究如何在按钮点击时验证我的表单，但是我的脚本一直跳到第一个函数验证名称一个保持突出显示，我不知道要放在清除所有功能中的内容所以它会跳转到下一个未经验证的项目

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值。它将停止执行验证

调用所有函数提交表单

3 个答案: