jQuery中的必填字段验证器

Question

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

领域：

1. 名称（文本框） ->应输入值。 如果没有输入并出来，它将显示错误消息。

2. 电子邮件（regex） ->检查邮件格式

3. 性别（单选按钮） ->应该选择任何一个单选按钮

4. 位置（下拉列表） ->不输入下拉列表将显示错误消息

5. 手机号码（文本框） ->仅输入号码

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

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

            }
            });

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

Answer 1

您不应在电子邮件文本框的click事件上执行此操作，而应在名称文本框的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})+$/

您将从文本框中获取值，并使用match将其与正则表达式匹配。 点击此链接以了解更多信息。 这将在#Email文本框的blur事件中完成

编辑 -

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

对于下拉菜单 -

您可以将模糊事件附加到下拉列表中，并检查在页面加载开始时显示的默认值是否仍为所选值。 如果是这样，请显示错误，否则请不要。

对于单选按钮 -

检查此jsFiddle 。 从这里抓起。 您应该能够使用它来配置代码，以在未选中单选按钮时显示错误。

Answer 2

您需要使用blur事件来识别元素失去焦点。 请访问文档以获取更多信息和示例。

如果您愿意，也可以尝试jQuery验证插件。 访问jQuery Validation Plugin网站

Answer 3

像这样的东西

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