是否有任何非常简单的JQuery验证

Are there any very Simple JQuery Validation?

本文关键字：JQuery 验证 简单 非常 任何 是否      更新时间：2023-09-26

嗨，我想给表单添加一些简单的验证。

有两个文本框，用户只需输入数字，并且必须大于零。jquery代码在它自己的文件中（表单由html/jquery.php组成）。第一个数字表示"以前的年龄"，第二个数字表示当前年龄。例如，如果用户在文本框中输入"0"，则会出现一个警告或消息框，通知他们需要输入一个大于零的数字。除了在文本框中输入的大于零的数字之外，任何其他数字都会导致警报消息。

附带说明一下，一旦用户清除了表单的要求，.php文件仅用于计算/数学。

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

谢谢，Charles

如果去掉问题的方面，验证是相当基本的。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;
  }
}

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

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

Regex到validet输入数据

    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>

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

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

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

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

添加一个整数验证

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

等等。只需点击链接了解更多信息。

相关文章：