html 用户名表单验证码,Bootstrap实现登录校验表单(带验证码)

这个登陆窗口是双登陆窗口的，对IE8及早期版本不支持，可以根据自己的开发语言更换，我这个是asp的，其中的引用文件可以在网络上自行下载，如找不到可以留下邮箱~！

关键代码如下所示：

scm登陆界面

body {

background-color: #999;

}

Response.Buffer = True

Response.ExpiresAbsolute = Now() - 1

Response.Expires = 0

Response.CacheControl = "no-cache"

%>

******管理系统

• 供应商登陆
• 生产商登陆

供应商登陆

账号

密码

请将如下计算结果填入文本框内：

生产商登陆

账号

密码

请将如下计算结果填入文本框内：

$(document).ready(function() {

// Generate a simple captcha

function randomNumber(min, max) {

return Math.floor(Math.random() * (max - min + 1) + min);

};

function generateCaptcha() {

$('#captchaOperation').html([randomNumber(1, 50), '+', randomNumber(1, 50), '='].join(' '));

};

generateCaptcha();

$('#LoginG')

.bootstrapValidator({

//message: 'This value is not valid',

feedbackIcons: {

valid: 'glyphicon glyphicon-ok',

invalid: 'glyphicon glyphicon-remove',

validating: 'glyphicon glyphicon-refresh'

},

fields: {

Username: {

message: 'The username is not valid',

validators: {

notEmpty: {

message: '供货商账户不能为空'

},

stringLength: {

min: 5,

max: 10,

message: '供货商账号长度 5-10'

},

/*remote: {

url: 'remote.php',

message: 'The username is not available'

},*/

regexp: {

regexp: /^[a-zA-Z0-9_\.]+$/,

message: '只接受数字和字母 '

}

}

},

Password: {

validators: {

notEmpty: {

message: '密码不能为空'

}

}

},

captcha: {

validators: {

callback: {

message: '验证码错误',

callback: function(value, validator) {

var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);

return value == sum;

}

}

}

}

}

})

.on('error.form.bv', function(e) {

var $form = $(e.target),

bootstrapValidator = $form.data('bootstrapValidator');

if (!bootstrapValidator.isValidField('captcha')) {

// The captcha is not valid

// Regenerate the captcha

generateCaptcha();

}

});

});

$(document).ready(function() {

// Generate a simple captcha

function randomNumber(min, max) {

return Math.floor(Math.random() * (max - min + 1) + min);

};

function generateCaptcha() {

$('#captchaOperation2').html([randomNumber(1, 50), '+', randomNumber(1, 50), '='].join(' '));

};

generateCaptcha();

$('#LoginS')

.bootstrapValidator({

//message: 'This value is not valid',

feedbackIcons: {

valid: 'glyphicon glyphicon-ok',

invalid: 'glyphicon glyphicon-remove',

validating: 'glyphicon glyphicon-refresh'

},

fields: {

Username2: {

message: 'The username is not valid',

validators: {

notEmpty: {

message: '供货商账户不能为空'

},

stringLength: {

min: 5,

max: 10,

message: '供货商账号长度 5-10'

},

/*remote: {

url: 'remote.php',

message: 'The username is not available'

},*/

regexp: {

regexp: /^[a-zA-Z0-9_\.]+$/,

message: '只接受数字和字母 '

}

}

},

Password2: {

validators: {

notEmpty: {

message: '密码不能为空'

}

}

},

captcha2: {

validators: {

callback: {

message: '验证码错误',

callback: function(value, validator) {

var items = $('#captchaOperation2').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);

return value == sum;

}

}

}

}

}

})

.on('error.form.bv', function(e) {

var $form = $(e.target),

bootstrapValidator = $form.data('bootstrapValidator');

if (!bootstrapValidator.isValidField('captcha')) {

// The captcha is not valid

// Regenerate the captcha

generateCaptcha();

}

});

});