jquery中的必填字段验证器[关闭]答案

【问题标题】：Required field validators in jquery [closed]jquery中的必填字段验证器[关闭]
【发布时间】：2013-07-19 06:44:37
【问题描述】：

我想在我的表单字段中进行验证..

字段：

名称（文本框） --> 应该输入值。没有进入&退出时会显示错误信息。
Email(regex) -->检查邮件格式
性别（单选按钮） -->应选择任何一个单选按钮
Location(dropdown) --> 不输入下拉菜单会显示错误信息
手机号码（文本框） --> 只输入数字

以上所有类型的验证我都需要。

$('#Email').click(function(){
            var name=$('#Name').val();
            if(name==""){
                $('#Name').after('<div class="red">Name is Required</div>');

            }
            });

但是每当我单击电子邮件框时，它都会显示错误消息。怎么做？请帮我？我尝试了第一个字段 Name

【问题讨论】：

嘿，您正在为电子邮件执行单击功能，但检查了#Name，这是您需要的吗？如果是这样，这可能会发生 1. 名称字段为空， 2. 现在当您单击#Email 字段时，#Name 字段正在验证。为什么你不能使用 jquery.validator.js 插件，它会满足你的需求。
搜索 blur()、selectedIndexChanded() 事件和电子邮件正则表达式 /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ 并搜索如何使用它。

标签： jquery validation jquery-validate

【解决方案1】：

您不应该在 email 文本框的 click 事件上执行此操作，而应在 name 文本框的 blur 事件上执行此操作。每当控件失去焦点时都会触发 blur 事件。试试这个，

$("#Name").blur(function(){
    if($(this).val().length === 0){
        $(this).after('<div class="red">Name is Required</div>');
    }
});

我在这里检查#Name 文本框中的值的长度，只要它失去焦点。现在，当您提交表单时，您必须在用户按下按钮单击事件时再次进行此检查。

与验证电子邮件字段类似，您将使用@onlyVJ 提供的正则表达式。

/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/

您将从文本框中获取值并使用匹配将其与正则表达式匹配。 Follow this link to learn more. 这将在 #Email 文本框

的 blur 事件中完成

已编辑 -

我不会给你代码，但是我会指导你一种你可以使用的方法。

对于下拉菜单 -

您可以在下拉列表中附加一个模糊事件，并检查您在页面加载时开始显示的默认值是否仍然是选定的值。如果是，则显示错误，否则不显示。

对于单选按钮 -

检查此jsFiddle。来自here。您应该能够使用它来配置您的代码以在未选中单选按钮时显示错误。

【讨论】：

你能告诉我下拉菜单和单选按钮吗？
@AngDei 更新了我的代码。
没用所以我用$(this).val()代替this.val()
@Fanky - 已修复，谢谢。

【解决方案2】：

您需要使用 blur 事件来识别元素失去焦点。访问documentation for blur 了解更多信息和示例。

如果你愿意，你也可以试试 jQuery 验证插件。访问jQuery Validation Plugin website

【讨论】：

【解决方案3】：

这样的……

$("#element").blur(function(){
   $(this).validate({
      // your code here
   })
})

【讨论】：