mybatis登录项目

1.数据的校验

以往：将账号密码发送至服务端校验
现在：利用jQuery在浏览器上校验（数据长度，格式等）
原因：减轻服务器的压力。

方法：
(1)jQuery在页面判断数据格式
(2)利用jQuery发送ajax的请求

登录_前台_表单校验

使用正则表达式
例如：
（1）校验用户名 /^\w{8,20}$/ 单词字符，长度8到20位

（2）校验密码 /^\w{8,20}$/ 单词字符，长度8到20位

（3）校验密码邮箱 = /^\w+@\w+.\w+$/ 邮箱 xxx@qq.com
示例：

	正则表达式.test(字符串)
返回一个布尔值
	true 格式正确
	false 格式错误

前端校验代码

<script type="text/javascript">
        function checkUserName(){
    
            //获取输入框的值
            var username =  $("#username").val();//"$("#username").val()"为输入框获取到的值
            //正则表达式  定义一个规则,执行test方法，符合规则返回true，否则返回false
            var reg=/^\w{8,20}$/;
            var flag=reg.test(username)//判断
            if(flag==true){
    
             //光标离开，判断。如果格式正确输入框不发生改变，如果格式不正确，输入框变红色
                $("#username").css("border","");
            }else{
    
                $("#username").css("border","1px solid red");

            }
            return flag;

        }
        function checkPassword(){
    
            //获取输入框的值
            var password =  $("#password").val();//"$("#password").val()"为输入框获取到的值
            //正则表达式  定义一个规则,执行test方法，符合规则返回true，否则返回false
            var reg=/^\w{8,20}$/;
            var flag=reg.test(password)//判断
            if(flag==true){
    
                //光标离开，判断。如果格式正确输入框不发生改变，如果格式不正确，输入框变红色
                $("#password").css("border","");
            }else{
    
                $("#password").css("border","1px solid red");

            }
            return flag;
        }
        $(function () {
    
            //判断账号密码输入框获取到的值的格式是否正确
            $("#username").blur(checkUserName);//输入框失去焦点

            $("#password").blur(checkPassword);

        })


    </script>

登录_前台_表单校验2

• （1）submit函数
  控制表单是否提交，函数返回trye，表单提交，返回flase不提交
  ajax提交，写flase
页面是一个带有submit的按钮的from表单，可以拦截

 <form id="loginForm" action="" method="post" accept-charset="utf-8">
 <input type="submit" ></input>
 </form>

拦截代码

 $("#loginForm").submit(function () {
   
                alert("拦截登录")
                return false;
            })

代码位置

前端页面ajax

$(function () {
   
                //判断账号密码输入框获取到的值的格式是否正确
                $("#username").blur(checkUserName).val();//输入框失去焦点

                $("#password").blur(checkPassword).val();

                $("#