Javascript 验证输入I'；我专注于，不管别人的地位如何？_Javascript_Jquery_Forms

Javascript 验证输入I'；我专注于，不管别人的地位如何？

javascript jquery forms

Javascript 验证输入I'；我专注于，不管别人的地位如何？,javascript,jquery,forms,Javascript,Jquery,Forms,我有个问题需要解决。。。我想做的是准确地验证用户正在填写的输入，不管第一个输入或任何其他输入是否为空，另一个是如果每个输入都已验证，则不发送ajax post请求这是我目前掌握的代码： function sendInfo() { //variables var name = $("input#name").val(); var surname = $("input#surname").val(); //inputs validation if (na

我有个问题需要解决。。。我想做的是准确地验证用户正在填写的输入，不管第一个输入或任何其他输入是否为空，另一个是如果每个输入都已验证，则不发送ajax post请求

这是我目前掌握的代码：

function sendInfo() {

    //variables
    var name = $("input#name").val();
    var surname = $("input#surname").val();

    //inputs validation
    if (name == "") {
        $("input#name").focus();
        $("input#name").parent().find('span').addClass('err').text('you have to fill the name');
        return false;
    } 
     if (surname == "") {
        $("input#surname").focus();
        $("input#surname").parent().find('span').addClass('err').text("you have to fill the surname");
        return false;
    } 

        //Manage server side

        $.ajax({
            type: 'POST',
            url: '/path',
            data: {name, surname},
            success: function (result) {
                //all ok, do something
            },
            error: function (err) {
                //something wrong, do other stuff
            }
        });
}

试试这个

function sendInfo() {
    //variables
    var name = $("input#name").val();
    var surname = $("input#surname").val();
    var error = false;

    //inputs validation
    if (name == "") {
        $("input#name").focus();
        $("input#name").parent().find('span').addClass('err').text('you have to fill the name');
        error = true;
    } 
     if (surname == "") {
        $("input#surname").focus();
        $("input#surname").parent().find('span').addClass('err').text("you have to fill the surname");
        error = true;
    } 

    if (error) return false;

        //Manage server side

        $.ajax({
            type: 'POST',
            url: '/path',
            data: {name, surname},
            success: function (result) {
                //all ok, do something
            },
            error: function (err) {
                //something wrong, do other stuff
            }
        });
}

可以通过添加bool变量isValid来实现这一点。您的代码应该是这样的

function sendInfo() {
//variables
var isValid = true;
var name = $("input#name").val();
var surname = $("input#surname").val();

//inputs validation
if (name == "") {
    $("input#name").focus();
    $("input#name").parent().find('span').addClass('err').text('you have to fill the name');
    isValid = false;
} 
 if (surname == "") {
    $("input#surname").focus();
    $("input#surname").parent().find('span').addClass('err').text("you have to fill the surname");
    isValid = false;
} 

    //Manage server side
if(isValid){
    $.ajax({
        type: 'POST',
        url: '/path',
        data: {name, surname},
        success: function (result) {
            //all ok, do something
        },
        error: function (err) {
            //something wrong, do other stuff
        }
    });
  }
}

<input type='text' id='some-text-1' class='validated-field'>
<input type='text' id='some-text-2' class='validated-field'>
<input type='text' id='some-text-3' class='validated-field'>

尝试在post之前验证onfocus（）的输入

向每个要验证的字段添加特定类。然后将元素上的事件与该类绑定，该类将在更改时验证字段。如果已正确验证，请将此信息存储在元素上

例如，您的字段如下所示

function sendInfo() {
//variables
var isValid = true;
var name = $("input#name").val();
var surname = $("input#surname").val();

//inputs validation
if (name == "") {
    $("input#name").focus();
    $("input#name").parent().find('span').addClass('err').text('you have to fill the name');
    isValid = false;
} 
 if (surname == "") {
    $("input#surname").focus();
    $("input#surname").parent().find('span').addClass('err').text("you have to fill the surname");
    isValid = false;
} 

    //Manage server side
if(isValid){
    $.ajax({
        type: 'POST',
        url: '/path',
        data: {name, surname},
        success: function (result) {
            //all ok, do something
        },
        error: function (err) {
            //something wrong, do other stuff
        }
    });
  }
}

<input type='text' id='some-text-1' class='validated-field'>
<input type='text' id='some-text-2' class='validated-field'>
<input type='text' id='some-text-3' class='validated-field'>

注意：这将基本上在每次按键后“激发”，而不仅仅是在您完成编辑后

注2：根据创建元素的方式，如果要在

document.ready

之后调用此函数，则必须将其绑定到当时确实已准备就绪的元素

您的validate函数应该执行必要的验证，然后以某种方式将元素标记为

function validate($element){
    var value = $element.val();
    // var isValid = your validation here
    $element.data("valid", isValid);
}

这将产生如下元素

<input type='text' id='some-text-1' class='validated-field' data-valid=true>
<input type='text' id='some-text-2' class='validated-field' data-valid=false>
<input type='text' id='some-text-3' class='validated-field'>

第一个验证正确，第二个不正确，第三个尚未验证，因为用户尚未填写

通过这个，您可以检查这些元素中的每一个是否都经过验证

validateElements(className){
    var elements = $('.' + className);
    for(var i=0; i<elements.length; i++){
        if(!$(elements[i]).data("valid") === true){
            return false; //at least one isn't validated OK
        }
    }
    return true; //all good
}

validateElements（类名）{
变量元素=$（'.'+className）；
对于（var i=0；ii如果希望每次执行所有验证，请在每次验证中删除返回的，并将单个变量改为false，然后在进行ajax调用之前检查该变量，如果该变量为false，则跳过调用？var isValid=true；
在验证之前，然后将isValid=false
改为re在ajax调用之前检查if（！isValid）{return；}
。此外，您应该将验证包装到单个函数中，以便从任何地方调用。这样，如果（！validateForm（））{return；}，您就可以执行if（！validateForm（））{return；}
在ajax和返回有效之前；
内部validateForm
如果用户已经填写了您需要验证的内容？另外，如果您总是想验证所有设置焦点，则没有什么意义，因为您总是在最后一个无效字段上结束，忽略其他字段。我根本不会设置焦点，如果必须设置，请设置它指向第一个无效字段而不是最后一个，可能更方便用户？如果（isValid）
足够多，它是一个布尔值：）无论如何，不要执行如果（isValid==true）{//lots of code here}
而是执行如果（！isValid）{return}
更易于维护和阅读。-尽可能避免嵌套。这样会产生更干净、更可读的代码。好的，谢谢让我编辑我的代码，我们必须检查true，以便使用if（isValid）虽然你的答案很好，但一般来说你不必检查是否有效
，检查！isValid
可以让你在不添加不必要的嵌套的情况下突破，这是编写干净代码的一个好习惯，这使得代码在需要时更易于管理和重构。如果你遵循通用全局输入验证的路线ion请确保您没有调用错误消息中的所有字段name
。当您否决某人时，它通常会进行评论。我们都在这里学习，您的盲目否决在这里并不受欢迎，特别是考虑到它在摆姿势5秒后被否决。您要么是一个超级快速的读者，要么您正在尝试选择你的答案，这会让你更不受欢迎。