Javascript 没有插件的jQuery表单验证

我是jQuery新手，希望做一个简单的表单验证。因此，如果指定文本字段的值是空字符串，我希望显示相关的div元素

下面是我的HTML和jQuery，任何帮助都会很棒

<form id="frm">
    <p>Please enter your name</p>
    <input type="text" id="txtname" autofocus >
    <span id="msg_name"></span>

    <p>Please enter your surname</p>
    <input type="text" id="txtsurname" > <span id="msg_surname"></span>

    <input type="submit" id="send" value="Submit">
</form>

$(document).ready(function() {  
    $("#frm").submit(function(event) {      
        var vname = $("#txtname").val(),
            vsurname = $("#txtsurname").val();      

        if(vname == "") {           
            $("#msg_name").text("Please fill this out");
            event.preventDefault();         
        } else if (vsurname == "") {                
            $("#msg_surname").text("Please fill this out");
            event.preventDefault();
        }       
    });
});

请输入您的姓名

请输入您的姓氏

$（文档）.ready（函数（）{
$（“#frm”）.submit（函数（事件）{
var vname=$（“#txtname”）.val（），
vsurname=$（“#txtNames”）.val（）；
如果（vname==“”）{
$（“#msg_name”）。文本（“请填写此项”）；
event.preventDefault（）；
}else如果（vsurname==“”）{
$（“#msg_姓氏”）。文本（“请填写此项”）；
event.preventDefault（）；
}       
});
});

在生产中使用插件会更合适，但作为一个学习练习：

首先，您需要使用

提交

事件，而不是

单击

，否则键盘将绕过验证并允许提交

$("form").submit(function (e) {

从验证消息上的一个公共类开始，并隐藏具有CSS样式的消息

.validation{
    display: none;
}

还要对要验证的项使用公共类。如果您遵循某种模式（例如

class=“validate”

），则不需要ID：

在这里，所有这些都被放在一起：

JSFiddle:

正如@Matt Browne所指出的，您可能希望忽略字段中的空白，因此也可以使用

$.trim（）

修剪结果

---

jsiddle:

您可以使用

required

属性。这在html5中是可用的。谢谢，我这样做是为了教育目的，想学习jquery syntaxesUh哦，看起来你忘了问一个问题。那么这段代码不起作用了还是怎么了？请澄清您想问什么？jQuery不是标准。HTML5是。如果你想获得最佳网络实践方面的教育，我会按照Jai说的做，并使用

require

+jQuery插件，例如。或者更好的方法是，选择一个简单的模型绑定框架，比如KnockoutJS来练习。如果你还想拒绝只包含空格的字段，你可以像这样修剪字符串：$.trim（$（this.val（））===““你看过我在问题中修改的代码了吗？”：）有什么理由不正确吗？@Devin Gray:如果字段不是空的，则不会删除错误消息。出于某种原因，您还可以测试其中一个/或两个，而不是两个。为什么会这样？您只想要第一条错误消息吗？如果我添加$（“#msg_name”）.empty（）怎么办；在我的if条件和$（“#msg_姓氏”）.empty（）中；在我的生活中，如果还有别的？然后将focus（）应用于txtnameelement@Devin格雷：是的，那会有用，但我的下一个问题是：当你添加2个、10个或100个字段时会发生什么。。。您是否曾经希望像这样将元素硬连接在一起并继续复制代码？：）

<input class="validate" type="text" id="txtsurname" />

    $('.validate', this).each(function () {
        if ($(this).val() == "") {
            // Stop the form submitting
            e.preventDefault();
            // Show the assciated message
            $(this).next('.validation').show();
        } else {
            $(this).next('.validation').hide();
        }
    });