jquery - 通过 Jquery 验证多个输入

Question

谁能指出我如何使用单个提交按钮设置 2 个独立输入的正确方向。

我有 2 个输入元素。每个元素都会返回一个不同的元素 id。每个输入将单独验证其输入。即显示它自己的错误信息。

我的代码看起来像这样

<script src="{{ STATIC_URL }}js/jquery.js"></script>
<script type="text/javascript">
jQuery(function(){
    $("#input-whatmask").click(function() {
    $("form").submit(function(){
    $(".error").hide();
    $("#input-whois").removeClass("errorinput");
    var hasError = false;
        var searchReg = /^[a-zA-Z0-9\s\/\.]+$/;
        var searchVal = $("#input-whatmask").val();

        if(searchVal == '') {
            $("#input-whatmask").addClass("errorinput");
        $("#input-whatmask").after('<span class="error">Enter an IP and mask.</span>');
            hasError = true;
        } else if(!searchReg.test(searchVal)) {
        $("#input-whatmask").addClass("errorinput");
        $("#input-whatmask").after('<span class="error">Enter valid text.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
                                else {
                                        return true;
                                }
    });
});
});
jQuery(function(){
        $("#input-whois").click(function() {
    $("form").submit(function(){
        $(".error").hide();
    $("#input-whatmask").removeClass("errorinput");
    var hasError = false;
        var searchReg = /^[a-zA-Z0-9\s\/\.]+$/;
        var searchVal = $("#input-whois").val();

        if(searchVal == '') {
            $("#input-whois").addClass("errorinput");
        $("#input-whois").after('<span class="error">Enter an IP address or domain.</span>');
            hasError = true;
        } else if(!searchReg.test(searchVal)) {
            $("#input-whois").addClass("errorinput");
        $("#input-whois").after('<span class="error">Enter valid text.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
                                else {
                                        return true;
                                }
    });
});
});


</script>

<form method="post" name="form1" action="/whatmask_output/">
{% csrf_token %}
          <div id="sectioncol" ><span class="section" >whatmask</span><input type="text" name="input-whatmask" id="input-whatmask" value="" size="20" /></div>
      <br/><br/>
      <div id="sectioncol" ><span class="section" >whois</span><input type="text" name="input-whois" id="input-whois" value="" size="20" /></div>
          <input type="submit" value="Submit" id="btn-search" />
</form>

</body>
</html>

Answer 1

试试这个：

$(document).ready(function(){
    var hasError = false;

    $("form").submit(function(e){
        var searchReg = /^[a-zA-Z0-9\s\/\.]+$/;

        if ($("#input-whatmask").val() != '' && $("#input-whois").val() != '')
        {
            alert('Enter only one field at a time!');
            return false;
        }

        if (hasError)
            return false;

        if ($("#input-whatmask").val() != '')
        {
            if(!searchReg.test($("#input-whatmask").val())){
                $("#input-whatmask").addClass("errorinput").after('<span class="error">Enter a valid value.</span>');
                hasError = true;
                return false;
            }
        }
        else if ($("#input-whois").val() != '')
        {
            if(!searchReg.test($("#input-whois").val())){
                $("#input-whois").addClass("errorinput").after('<span class="error">Enter a valid value.</span>');
                hasError = true;
                return false;
            }
        }
        else
        {
            alert('No values entered!');
            return false;
        }
    });

    $("#input-whatmask, #input-whois").click(function() {
        if ($(this).hasClass('errorinput'))
        {
            $(this).next().remove();
            $(this).removeClass("errorinput");
            hasError = false;
        }
    });
});

JSFiddle：这里