使用 jquery validate 进行电子邮件验证答案

【问题标题】：Email validation with jquery validate使用 jquery validate 进行电子邮件验证
【发布时间】：2015-12-28 08:11:18
【问题描述】：

我需要使用 jQuery validate 验证电子邮件，我认为 data-val-regex 不起作用（只有模式不起作用）。

有人可以帮我解决这个问题吗？

这是部分：

data-val-regex-insensitive="True" 
data-val-regex-pattern="[a-z0-9][a-z0-9_.-]+[a-z0-9]" 
data-val-regex="@Resource.Validation_MailType"

谢谢

【问题讨论】：

标签： jquery regex asp.net-mvc validation

【解决方案1】：

这是一个例子：

$('#inputID').bind('blur focus', function(event) {
  if (event.type === 'blur') {
    //cache jquery objects
    var $invalidEmailError = $('#invalidEmailError'),
      $submitButton = $('#submitButton'),
      $this = $(this);

    var v = $this.val();

    //trim spaces
    v = v.replace(/^\s+|\s+$/g, "");

    //check email against regex
    if (v.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i)) {
      $invalidEmailError.hide();
    } else {
      $invalidEmailError.show();
    }
    //replace email with trimmed version
    $this.val(v);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputID" type="text" placeholder="Please enter an email" />

<button id="submitButton" type="submit">Send</button>

<div id="invalidEmailError" style="display:none">Please enter a valid email address</div>

【讨论】：

请回答我的具体问题。还是谢谢你

【解决方案2】：

试试这个，验证电子邮件的简单方法！

<label for="email" id="email">Hey!</label>
<input id="email" name="email" type="email" class="required" /> 
<span class="msg error">You shall not pass!</span>
<span class="msg success">You can pass!</span>

var component = {
    input   : $('input[name="email"]'),
    mensage : {
        fields  : $('.msg'),
        success : $('.success'),
        error   : $('.error')
    }
},
    regex  = /^[a-z][a-zA-Z0-9_]*(\.[a-zA-Z][a-zA-Z0-9_]*)?@[a-z][a-zA-Z-0-9]*\.[a-z]+(\.[a-z]+)?$/;

component.input.blur(function () {
    component.mensage.fields.hide();
    regex.test(component.input.val()) ? component.mensage.success.show() : component.mensage.error.show();
});

.msg {
    display: none;
}
.error {
    color: red;
}
.success {
    color: green;
}

<label for="email" id="email">Hey!</label>
<input id="email" name="email" type="email" class="required" /> 
<span class="msg error">You shall not pass!</span>
<span class="msg success">You can pass!</span>

【讨论】：

如何给这个输入文本添加验证功能？