调用所有函数提交表单

call all functions to submit form

本文关键字：提交 表单 函数 调用      更新时间：2023-09-26

我是新的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";
    }
  }
}

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"));
});

series调用每个验证函数，如果传递错误则停止执行。如果是或不是错误，则调用errors或success函数

p。这是学习javascript的正确方法。如果你想更好地了解javascript，你不应该使用jQuery这样的糖类

我推荐以下方法:

您有一个验证器函数列表，格式为

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

每个验证器函数返回一个错误消息，如果没有问题则不返回任何内容(未定义)。

然后使用$。对于id:验证器对，您可以这样做(代码可能有bug):

$(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);
    }
)

这个方法的优点是用户可以一次看到所有的错误，而不是一次看到一个。

或者，每次用户点击提交时，您都要执行类似$的操作。映射或$。每个都要运行所有的验证器函数，并适当地进行报错。

还要注意，您不能依赖客户端代码来验证表单，因为对于用户或黑客来说，禁用或忽略您的验证代码并向您的服务器发送他们想要的任何值都是微不足道的。然而，客户端验证代码对于流畅和响应灵敏的用户体验非常有用。

我检查了你的代码，得到了你的代码的主要问题:下面是验证的一部分:

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

相关文章：