您的位置:首页 > Web前端 > JQuery

form表单验证jquery

2016-03-01 13:56 369 查看
form表单验证:

var Login = function() {

var handleLogin = function() {

$('.login-form').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
username: {
required: true
},
password: {
required: true
},
remember: {
required: false
}
},

messages: {
username: {
required: "Username is required."
},
password: {
required: "Password is required."
}
},

invalidHandler: function(event, validator) { //display error alert on form submit
$('.alert-danger', $('.login-form')).show();
},

highlight: function(element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},

success: function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},

errorPlacement: function(error, element) {
error.insertAfter(element.closest('.input-icon'));
},

submitHandler: function(form) {
form.submit(); // form validation success, call ajax form submit
}
});

$('.login-form input').keypress(function(e) {
if (e.which == 13) {
if ($('.login-form').validate().form()) {
$('.login-form').submit(); //form validation success, call ajax form submit
}
return false;
}
});
}

var handleForgetPassword = function() {
$('.forget-form').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {
email: {
required: true,
email: true
}
},

messages: {
email: {
required: "Email is required."
}
},

invalidHandler: function(event, validator) { //display error alert on form submit

},

highlight: function(element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},

success: function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},

errorPlacement: function(error, element) {
error.insertAfter(element.closest('.input-icon'));
},

submitHandler: function(form) {
form.submit();
}
});

$('.forget-form input').keypress(function(e) {
if (e.which == 13) {
if ($('.forget-form').validate().form()) {
$('.forget-form').submit();
}
return false;
}
});

jQuery('#forget-password').click(function() {
jQuery('.login-form').hide();
jQuery('.forget-form').show();
});

jQuery('#back-btn').click(function() {
jQuery('.login-form').show();
jQuery('.forget-form').hide();
});

}

var handleRegister = function() {

function format(state) {
if (!state.id) return state.text; // optgroup
return "<img class='flag' src='../../assets/global/img/flags/" + state.id.toLowerCase() + ".png'/>  " + state.text;
}

if (jQuery().select2) {
$("#select2_sample4").select2({
placeholder: '<i class="fa fa-map-marker"></i> Select a Country',
allowClear: true,
formatResult: format,
formatSelection: format,
escapeMarkup: function(m) {
return m;
}
});

$('#select2_sample4').change(function() {
$('.register-form').validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
});
}

$('.register-form').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {

fullname: {
required: true
},
email: {
required: true,
email: true
},
address: {
required: true
},
city: {
required: true
},
country: {
required: true
},

username: {
required: true
},
password: {
required: true
},
rpassword: {
equalTo: "#register_password"
},

tnc: {
required: true
}
},

messages: { // custom messages for radio buttons and checkboxes
tnc: {
required: "Please accept TNC first."
}
},

invalidHandler: function(event, validator) { //display error alert on form submit

},

highlight: function(element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},

success: function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},

errorPlacement: function(error, element) {
if (element.attr("name") == "tnc") { // insert checkbox errors after the container
error.insertAfter($('#register_tnc_error'));
} else if (element.closest('.input-icon').size() === 1) {
error.insertAfter(element.closest('.input-icon'));
} else {
error.insertAfter(element);
}
},

submitHandler: function(form) {
form.submit();
}
});

$('.register-form input').keypress(function(e) {
if (e.which == 13) {
if ($('.register-form').validate().form()) {
$('.register-form').submit();
}
return false;
}
});

jQuery('#register-btn').click(function() {
jQuery('.login-form').hide();
jQuery('.register-form').show();
});

jQuery('#register-back-btn').click(function() {
jQuery('.login-form').show();
jQuery('.register-form').hide();
});
}

return {
//main function to initiate the module
init: function() {

handleLogin();
handleForgetPassword();
handleRegister();

}

};

}();


初始化调用 :

Login.init();

var Login = function() {

var handleLogin = function() {

$('.login-form').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
username: {
required: true
},
password: {
required: true
},
remember: {
required: false
}
},

messages: {
username: {
required: "Username is required."
},
password: {
required: "Password is required."
}
},

invalidHandler: function(event, validator) { //display error alert on form submit
$('.alert-danger', $('.login-form')).show();
},

highlight: function(element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},

success: function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},

errorPlacement: function(error, element) {
error.insertAfter(element.closest('.input-icon'));
},

submitHandler: function(form) {
form.submit(); // form validation success, call ajax form submit
}
});

$('.login-form input').keypress(function(e) {
if (e.which == 13) {
if ($('.login-form').validate().form()) {
$('.login-form').submit(); //form validation success, call ajax form submit
}
return false;
}
});
}

var handleForgetPassword = function() {
$('.forget-form').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {
email: {
required: true,
email: true
}
},

messages: {
email: {
required: "Email is required."
}
},

invalidHandler: function(event, validator) { //display error alert on form submit

},

highlight: function(element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},

success: function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},

errorPlacement: function(error, element) {
error.insertAfter(element.closest('.input-icon'));
},

submitHandler: function(form) {
form.submit();
}
});

$('.forget-form input').keypress(function(e) {
if (e.which == 13) {
if ($('.forget-form').validate().form()) {
$('.forget-form').submit();
}
return false;
}
});

jQuery('#forget-password').click(function() {
jQuery('.login-form').hide();
jQuery('.forget-form').show();
});

jQuery('#back-btn').click(function() {
jQuery('.login-form').show();
jQuery('.forget-form').hide();
});

}

var handleRegister = function() {

function format(state) {
if (!state.id) return state.text; // optgroup
return "<img class='flag' src='../../assets/global/img/flags/" + state.id.toLowerCase() + ".png'/>  " + state.text;
}

if (jQuery().select2) {
$("#select2_sample4").select2({
placeholder: '<i class="fa fa-map-marker"></i> Select a Country',
allowClear: true,
formatResult: format,
formatSelection: format,
escapeMarkup: function(m) {
return m;
}
});

$('#select2_sample4').change(function() {
$('.register-form').validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
});
}

$('.register-form').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {

fullname: {
required: true
},
email: {
required: true,
email: true
},
address: {
required: true
},
city: {
required: true
},
country: {
required: true
},

username: {
required: true
},
password: {
required: true
},
rpassword: {
equalTo: "#register_password"
},

tnc: {
required: true
}
},

messages: { // custom messages for radio buttons and checkboxes
tnc: {
required: "Please accept TNC first."
}
},

invalidHandler: function(event, validator) { //display error alert on form submit

},

highlight: function(element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},

success: function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},

errorPlacement: function(error, element) {
if (element.attr("name") == "tnc") { // insert checkbox errors after the container
error.insertAfter($('#register_tnc_error'));
} else if (element.closest('.input-icon').size() === 1) {
error.insertAfter(element.closest('.input-icon'));
} else {
error.insertAfter(element);
}
},

submitHandler: function(form) {
form.submit();
}
});

$('.register-form input').keypress(function(e) {
if (e.which == 13) {
if ($('.register-form').validate().form()) {
$('.register-form').submit();
}
return false;
}
});

jQuery('#register-btn').click(function() {
jQuery('.login-form').hide();
jQuery('.register-form').show();
});

jQuery('#register-back-btn').click(function() {
jQuery('.login-form').show();
jQuery('.register-form').hide();
});
}

return {
//main function to initiate the module
init: function() {

handleLogin();
handleForgetPassword();
handleRegister();

}

};

}();
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: