Question

您好我想在表单中添加一些简单的验证。

有2个文本框，用户只能输入数字，且必须大于零。 jquery代码在它自己的文件中（表单由html / jquery / php组成）。第一个数字是“上一个年龄”，第二个数字是“当前年龄”。例如，如果用户在任一文本框中输入“0”，则会出现警告或消息框，通知他们需要输入大于零的数字。输入文本框中除了大于零的数字之外的任何内容都应该生成警报消息。

作为旁注，一旦用户清除了表单的要求，.php文件仅用于计算/数学。

如果有人可以提供一个清晰简洁的例子，那将非常感激。我试图通过谷歌搜索找到一个合适的例子，但似乎没有什么适合。此外，我试图避免使用验证器插件，这似乎是谷歌搜索问题时的答案。我有我的理由，如果需要，我会非常乐意解释。

感谢-你，查尔斯

Answer 1

如果你删除问题的方面，验证是相当基本的。所有jquery都将用于更容易地选择特定的dom元素

$(function() {
  $('form').submit(function() {
    return checkFormIsValid();
  });
  $('#field1').keyup(function() {
    checkField(this.id);
  });
  $('#field2').keyup(function() {
    checkField(this.id);
  });
});

function checkFormIsValid()
{
  return checkField('field1') && checkField('field2');
}

function checkField(fieldId) 
{
  var val = $('#'+fieldId).val();
  // validation logic
  if(isValid) {
    return true;
  } else {
    alert(fieldId+ ' is not valid');
    return false;
  }
}

将在每个字段以及用户提交表单时触发此基本验证。

Answer 2

正如 Ben Rowe 建议您可以使用该代码，但在checkField（fieldId）函数中，您必须验证输入数据应该只是整数，在这种情况下您可以使用这些代码来修改它。

Regex to validet input data

Answer 3

    var isEmail_re = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
function isEmail(s) {
    return String(s).search(isEmail_re) != -1;
}

function isBlank(s) {
    if (!s || s.length == 0) {
        return true;
    }
    // checks for a non-white space character 
    // which I think [citation needed] is faster 
    // than removing all the whitespace and checking 
    // against an empty string
    return !/[^\s]+/.test(s);
}


function SendContactForm() {
    var isFormValid = true; 

    var isEmailOk = isEmail($('#cemail').val());
    if (isEmailOk == false) {
        $('#emEmail').css('color', 'red');
        isFormValid = false;
    }
    else {
        $('#emEmail').css('color', 'black');
    }

    var isNameOk = isBlank($('#cname').val());
    if (isNameOk) {
        $('#emName').css('color', 'red');
        isFormValid = false;
        //alert('!');
    }
    else {
        $('#emName').css('color', 'black');
    }

    var isSubjectOk = isBlank($('#csubject').val());
    if (isSubjectOk) {
        $('#emSubject').css('color', 'red');
        isFormValid = false;
    }
    else {
        $('#emSubject').css('color', 'black');
    }

    var isMesageOk = isBlank($('#cmessage').val());
    if (isMesageOk) {
        $('#emMessage').css('color', 'red');
        isFormValid = false;
    }
    else {
        $('#emMessage').css('color', 'black');
    }

    if (isFormValid) {


        $('#contactFormFields').hide("explode", 1000);


        $.post("/Home/SendContactForm", { email: $('#cemail').val(),
            name: $('#cname').val(),
            subject: $('#csubject').val(),
            message: $('#cmessage').val()
        },
                 function (data) {
                    if (data.length > 0) {
                        // alert(data);
                        }
         });
    }
}




 <div id="contactFormFields">

                    <table>
                        <tr>
                            <td style="width: 150px;">
                                E-Mail
                            </td>
                            <td>
                                <input id="cemail" type="text" value="E-mail" name="email" size="25" class="required email" /><em id="emEmail">*</em>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 150px;">
                                Name
                            </td>
                            <td>
                                <input id="cname" name="name" size="25" class="required" maxlength="100" /><em id="emName">*</em>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 150px;">
                                Subject
                            </td>
                            <td>
                                <input id="csubject" name="subject" size="25" class="required" maxlength="200" /><em id="emSubject">*</em>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 150px; vertical-align: top;">
                                Message
                            </td>
                            <td>
                                <textarea id="cmessage" maxlength="1000" name="comment" cols="27" rows="10" class="required"></textarea><em id="emMessage">*</em>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 150px;">
                            </td>
                            <td>
                                <input type="submit" value="Send" class="input-btn" onclick="SendContactForm();" style=" width:100px; color: Black;" />
                            </td>
                        </tr>
                    </table>

                    </div>

Answer 4

也许您正在寻找插件来验证表单字段？

你可以尝试一下：http://www.vanadiumjs.com/ 只需添加其js文件即可。

添加必需的验证就像添加像这样的css一样简单

 <input class=":required" type="text">

添加整数验证

<input class=":integer" type="text">

等等。请点击链接获取更多信息。

有没有非常简单的JQuery验证？

4 个答案: