2024年5月18日发(作者：2022世界杯免费高清直播)

网页效果截图：

源码：

HTML代码（）

maximum-scale=1">

CSS代码（）

*{

padding:0;

margin:0;

}

body {

/* overflow:scroll; */

font-family:Georgia;

color:#000;

}

.form-box {

width:470px;

height:296px;

margin:100px auto;

border:3px #ADFF2F solid;

background-color:#C5FF6D;

border-radius:8px;

}

.welcom {

width:100%;

height:52px;

line-height:52px;

text-align:center;

font-size:30px;

font-family:Microsoft YaHei;

font-weight:bold;

border-bottom:1px #ADFF2F solid;

}

.input-box {

position:relative;

width:100%;

height:248px;

padding-top:30px;

}

.form-group {

width:100%;

height:50px;

line-height:50px;

}

.form-group label,.form-group input {

display:block;

height:40px;

font-size:16px;

}

.submit-button button {

position:absolute;

top:190px;

left:2%;

width:96%;

height:42px;

line-height:42px;

border-style:none;

border:2px #75FF58 solid;

border-radius:3px;

background-color:#86FF6D;

}.submit-button span {

font-size:20px;

font-weight:bold;

}

JS代码：（）

$(function(){

//设定两个标志，判断是否满足提交的条件

var ok1=false;

var ok2=false;

//设定键盘事件，回车换行

$(".form-control").keydown(function(event){

//判断是否是回车键

if( == '13'){

if($(this).val().length == 0){

}

else{

var currIndex = $(this).index(':input');

$(':input:eq('+(currIndex+1)+')').focus();

}

}

});

// 验证用户名

$('input[id="username"]').blur(function(){

var nameform=$(this).val();

// 验证是否输入用户名

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

$(".nameinfo").html("用户名不能为空！");

$(".nameinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});

}

// 验证用户名是否大于六位

else if($(this).val().length < 6){

$(".nameinfo").html("用户名至少为6位！");

$(".nameinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});

}

//验证用户名格式是否正确

else

if(!(/^[a-zA-Z][a-zA-Z0-9@]*$/)){

$(".nameinfo").html("用户名格式不正确！");

$(".nameinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});

}

else{

$(".nameinfo").html("输入正确");

$(".nameinfo").css({"color":"green","font-family":"KaiTi","font-size":"16px"});

//验证通过，将标志位置为true

ok1 = true;

}

});

//验证密码

$('input[id="password"]').blur(function(){

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

$(".passwordinfo").html("密码不能为空！");

$(".passwordinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});

}

else if($(this).val().length < 6){

$(".passwordinfo").html("密码至少为6位！");

$(".passwordinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});

}

else{

$(".passwordinfo").html("输入正确");

$(".passwordinfo").css({"color":"green","font-family":"KaiTi","font-

size":"16px"});

ok2 = true;

}

});

//输入不合法的情况下，获取焦点时清空错误输入

$('input[id="username"]').focus(function(){

if(!ok1){

$('input[id="username"]').val("");

}

});

$('input[id="password"]').focus(function(){

if(!ok2){

$('input[id="password"]').val("");

}

});

//点击进行用户名后台验证，通过验证后实现页面跳转

$(".submit-button button").click(function(){

username=$("#username").val();

password=$("#password").val();

if(ok1 && ok2){

//普通方式

$.ajax({

url:"/Login/ValidUser",

type:"POST",

dataType:"json",

data:{

username:"+username+",

password:"+password+"

},

success:function(){

="";

},

error:function(){

="";

}

});

//deferred模式

// $.ajax("/Login/ValidUser",

// {type:"post"},

// {dataType:"json"},

// {data:{username:"+username+",password:"+password+"}}

// ).done(function(){="";})

// .fail(function(){="";})

}

return false;//抑制了浏览器的默认点击行为

});

});