html表单电子邮件验证验证,通过jquery验证Email表单

在提交表单数据到服务器之前，通常需要在客户端进行一次验证，以确保用户提交数据的有效性。

通过jquery，我们可以对用户填写的Email地址进行验证。下面的代码片段完成了对Email表单字段的验证。

(function ($) {

$.fn.validateEmail = function () {

return this.each(function () {

var $this = $(this);

$this.change(function () {

var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

if ($this.val() == "") {

$this.removeClass("badEmail").removeClass("goodEmail")

}else if(reg.test($this.val()) == false) {

$this.removeClass("goodEmail");

$this.addClass("badEmail");

}else{

$this.removeClass("badEmail");

$this.addClass("goodEmail");

}

});

});

};

})(jQuery);

在代码中，如果用户输入的是合法的Email地址，例如example@example.example，那么就会为字段添加goodEmailclass类，否则添加badEmailclass类。