<div class="content"> <div class="login-wrap"> <form id="user_login" action=""> <h3>登 录</h3> <input class="name" name="" id="accountName" type="text" placeholder="请输入用户名"> <input class="code" name="password" id="password" type="password" placeholder="请输入密码"> <div class="btn"> <input type="button" id="submit" class="submit" value="登录" onclick="return check(this.form)"> <input type="reset" id="reset" class="reset" value="重置" > </div> <div id="CheckMsg" class="msg"></div> </form> </div></div><script>//验证表单是否为空，若为空则将焦点聚焦在input表单上，否则表单通过，登录成功 function check(form){var accountName = $("#accountName"),$password = $("#password") var accountName = accountName.val(),password = $password.val() if(!accountName || accountName == ""){showMsg("请输入用户名") form.accountName.focus () return false }if(!password || password == ""){showMsg("请输入密码") form.password.focus () return false } //这里为用ajax获取用户信息并进行验证，如果账户密码不匹配则登录失败，如不需要验证用户信息，这段可不写 $.ajax({url : systemURL,// 获取自己系统后台用户信息接口data :{"password":password,"accountName":accountName},type : "GET",dataType: "json",success : function(data) {if (data){if (data.code == "1111") { //判断返回值，这里根据的业务内容可做调整setTimeout(function () {//做延时以便显示登录状态值 showMsg("正在登录中...") console.log(data) window.location.href = url//指向登录的页面地址 },100)} else {showMsg(data.message)//显示登录失败的原因return false }}},error : function(data){showMsg(data.message) }})}//错误信息提醒function showMsg(msg){$("#CheckMsg").text(msg)}//监听回车键提交$(function(){document.onkeydown=keyDownSearch function keyDownSearch(e) {// 兼容FF和IE和Operavar theEvent = e || window.event var code = theEvent.keyCode || theEvent.which || theEvent.charCode if (code == 13) {$('#submit').click()//具体处理函数return false }return true }})</script><!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<meta name="keywords" content="白菜编辑部">
<title>白菜编辑部</title>
<style type="text/css">
</style>
<script type="text/javascript">
function check (form)
{
var reg = /^\s*|\s*$/g
if (form.username.value.replace(reg,'') == "")
{
alert ("请输入用户名")
form.username.focus ()
return false
}
else if (form.password.value.replace(reg,'') == "")
{
alert ("请输入密码")
form.password.focus ()
return false
}
else
{
return true
}
}
</script>
</head>
<body>
<div class="page-container">
<h1>基站问题信息管理系统</h1>
<h1>登录(Login)</h1>
<form name="form1" id="form1" action="loginprocess.php" method="post">
<input type="text" name="username" id="username" class="username" placeholder="请输入您的用户名！"> <input type="password" name="password"
id="password" class="password" placeholder="请输入您的用户密码！">
<button type="submit" class="submit_button" onclick="return check(this.form)">登录</button>
<div class="error">
<span>+</span>
</div>
</form>
</div>
</body>
</html>
用ajax一般都是需要有和数据库交互的操作，比如在注册的时候 要判断用户名是否存在，或者禁止用户，注册你不想让他注册的一些关键字（这些关键字需要在数据库中有张表记录，这也需要与数据库交互），其他的 比如 用户名不能为空，不是有下划线，不能有特殊字符。等等。。这个建议你用正则表达式来验证，这玩意灰常强大。
最后说下：你用ajax返回值的时候最好是返回数字
if(验证用户名是否存在的方法)
{
Response.Write("0")
Response.End()
}
else
{
Response.Write("1")
Response.End()
}
if(验证用户名是否含有非法字符)
{
Response.Write("3")
Response.End()
}
else
{
Response.Write("4")
Response.End()
}
这样你在js接受返回值的时候可以根据返回值，给出不同的提示，用户体验更好。
