js 前端表单验证

e-mail格式

1
2
3
4
5
6
function emailTest(obj) {
var myreg = /^([a-zA-Z0-9\-\.]+)@([a-zA-Z0-9\-\.]+)\.([a-zA-Z]{2,5})$/;
if (!myreg.test(obj)) {
return false;
}
}

val is empty

1
2
3
function isValEmpty(obj) {
return obj.length == 0 ? false : true
}

form-textarea

1
2
3
4
function stripHTML(text) {
var regex = /(<([^>]+)>)/ig;
return text.replace(regex, "");
}

form-checkbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function checkboxVerification(checkbox) {
var $checkboxWrapper = checkbox.parents('.form-type-checkbox');
if(checkbox.is(':checked')) {
$checkboxWrapper.removeClass('empty-error');
$checkboxWrapper.find('.empty-error-message').remove();
} else {
if(isRequired) {
isRequired = false;
}
if(!$checkboxWrapper.hasClass('empty-error')){
$checkboxWrapper.addClass('empty-error');
$checkboxWrapper.append("<p class='empty-error-message'>" + checkbox.attr('data-webform-required-error') + "</p>");
}
}
}

form-email

1
2
3
4
5
6
7
8
9
10
function emailVerification (email) {
if(emailTest(email.val()) == false) {
email.parent().addClass('empty-error');
if(isRequired) {
isRequired = false;
}
} else {
email.parent().removeClass('empty-error');
}
}

验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
var isRequired;

$('.form-textarea ').change(function () {
var textareaValue = $(this).val()
$(this).val(stripHTML(textareaValue))
});

var requiredElement = "input[required]:not([type='radio']), select[required], textarea[required]";

$form.find(requiredElement).each(function () {
var $this = $(this);
if(!$this.parent().find('.empty-error-message').length && $this.attr('type') !== 'checkbox'){
$this.parent().append("<p class='empty-error-message'>" + $this.attr('data-webform-required-error') + "</p>");
}
});

$form.find(requiredElement).bind('input propertychange', function () {//propertychange 无意义 ,只为bind事件。
var $this = $(this);

if (isValEmpty($this.val().trim())) {
if($this.attr('type') === 'email') {
emailVerification($this);
} else if($this.attr('type') === 'checkbox') {
checkboxVerification($this);
} else {
$this.parent().removeClass('empty-error');
}
} else {
$this.parent().addClass('empty-error');
}
});

submitBtn.on('click', function(e) {
isRequired = true;

$form.find(requiredElement).each(function () {
var $this = $(this);
if ($this.parent().is(":visible")) {
if (isValEmpty($this.val().trim()) == false) {
$this.parent().addClass('empty-error');
isRequired = false;
} else {
if($this.attr('type') === 'email') {
emailVerification($this);
} else if($this.attr('type') === 'checkbox') {
checkboxVerification($this);
} else {
$this.parent().removeClass('empty-error');
}
}
}
});

if (isRequired == false) {
if ($('.empty-error-message:visible').length > 0) {
var offsetTop = $(".empty-error-message:visible").eq(0).parent().offset().top - 60;
$([document.documentElement, document.body]).animate({
scrollTop: offsetTop
}, 250);
}
return false
}
});