Question

我有一个非常简单的HTML网页表单......

我正在获取数据并序列化为JSON （最终将发送到其他地方。但是，现在我正在使用console.log进行测试）。

当用户填写表单时，然后点击submit;我想简单地检查输入文本字段的value，并确保用户至少输入的数字更高然后0，但不是 0。

        <div>
            <label>Age
                <input type="text" name="age">
            </label>
        </div>

我希望此验证在之前运行，我的序列化函数会触发它。基本上，我想在发送数据之前检查或验证这一点。如果用户输入0，我就不想发送。

以下是我的完整JavaScript。 （我仍然无法获得如上所述的验证功能）。

(function ($) { $.fn.serializeFormJSON = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; })(jQuery); $('form').submit(function (e) { function validateForm(){ // would like to check before below fires for serialize var form = document.getElementById("form"), inputs = form.getElementsByTagName("input"), input = null, flag = true; for(var i = 0, len = inputs.length; i < len; i++) { input = inputs[i]; // if the value is not a valid number or it's less than or equal 0 if(isNaN(input.value) || +input.value < 0) { flag = false; input.focus(); console.log("error!"); // break; } } return(flag); } e.preventDefault(); var data = $(this).serializeFormJSON(); console.log(data); });

Answer 1

简单验证号码输入。试试这个。

＆＃13;

$("#submit").on("click", function(){
  inputValue = $("input[name='age']").val();
  var num = parseInt(inputValue);
  if(isNaN(num) || num <= 0){
    console.log(inputValue + " Invalid number!");
  } else {
    console.log(inputValue + " Valid number!");
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label>Age
        <input type="text" name="age">
    </label>
</div>
<input type="button" id="submit" value="Submit"\>

＆＃13;

Answer 2

要做到这一点，我（或多或少）通常会这样做：

<强> HTML

<form action="(action url)" id="form" method="post" onsubmit="return validateForm()">
    //form contents
</form>

<强> JS

function validateForm() { // would like to check before below fires for serialize
    //var form = document.getElementById("form"), inputs = form.getElementsByTagName("input"),
    //If you use jQuery, it more preferred to write like this:
    var form = $('#form'), inputs = form.find('input'), input = null, flag = true;

    for(var i = 0, len = inputs.length; i < len; i++) {
        input = inputs[i];
        // if the value is not a valid number or it's less than or equal 0 
        if(isNaN(input.value) || +input.value < 0) {
            flag = false;
            input.focus();
            console.log("error!");
        }
        //do the break
        if (!flag) break;
    }
    if (flag) {
        var data = $(this).serializeFormJSON();
        console.log(data);
    }
    return flag;
}

检查输入文本字段是否包含提交的最小值

2 个答案: