Javaweb学习笔记day04---项目一书城项目

书城项目

一、项目介绍

二、项目一阶段搭建

项目搭建

将页面原型复制到bookstore-v1项目中

三、登录校验

需求

登录功能实现账户、密码的非空校验

流程步骤：

1. 账户，密码内容改变校验 ：@change
2. 内容改变触发checkName和checkPassword方法
3. 双向绑定：v-model 把输入框的内容给到username和password
4. 非空校验：checkNull方法，返回结果
5. 返回结果提交给checkLogin方法做表单提交校验event.preventdefaul、t@submit

代码实现

<form action="login_success.html" @submit="checkLogin()">
    <label>用户名称：</label>
    <input
            class="itxt"
            type="text"
            placeholder="请输入用户名"
            autocomplete="off"
            tabindex="1"
            name="username"
            id="username"
            @change="checkUsername()"
            v-model="username"
    />
    <br/>
    <br/>
    <label>用户密码：</label>
    <input
            class="itxt"
            type="password"
            placeholder="请输入密码"
            autocomplete="off"
            tabindex="1"
            name="password"
            id="password"
            @change="checkPassword()"
            v-model="password"
    />
    <br/>
    <br/>
    <input type="submit" value="登录" id="sub_btn"/>
</form>

<script src="/bookstore-v1/static/script/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            username: "",
            password: "",
            errorMsg: ""
        },
        methods: {


            checkNull(content, errorMsg) {
                var reg = /^\s*$/;
                if (reg.test(content)) {
                    //内容为空
                    this.errorMsg = errorMsg;
                    return false;
                } else {
                    //内容不为空
                    this.errorMsg = "";
                    return true;
                }
            },

            /**
             * 校验账户
             */
            checkUsername() {
                return this.checkNull(this.username, "账户不能为空!");
            },
            /**
             * 校验密码
             */
            checkPassword() {
                return this.checkNull(this.password, "密码不能为空!");
            },

            /**
             * 校验登录表单
             */
            checkLogin() {
                //如果账户为空 || 密码为空，禁止表单提交
                //账户为空 flag1=false
                //密码为空 flag2=false
                if (!this.checkUsername() || !this.checkPassword()) {
                    //禁止表单提交
                    event.preventDefault();
                }
            }
        }
    })

</script>

四、注册校验

需求

在注册功能中，对用户名、密码、确认密码、邮箱、验证码进行表单校验

• 用户名应为6-16位数字和字母组成
• 密码长度至少为8位
• 密码两次输入一致
• 请输入正确的邮箱格式
• 验证码不能为空

流程步骤：

1.所有输入框监听内容改变 @change
2. 账户、密码、确定密码、邮箱、验证码触发check方法
3. 双向绑定 v-model
4. 校验输入内容是否满足正则表达式返回结果
5. 返回结果提交个checkRejest方法做非空校验
6. 表单提交校验event.preventDefault

代码实现

<form action="regist_success.html" @submit="checkRegist()">
    <div class="form-item">
        <div>
            <label>用户名称:</label>
            <input type="text" placeholder="请输入用户名" @change="checkUsername()" v-model="username"/>
        </div>
        <span class="errMess" v-text="usernameErrorMsg">用户名应为6~16位数字和字母组成</span>
    </div>
    <div class="form-item">
        <div>
            <label>用户密码:</label>
            <input type="password" placeholder="请输入密码" @change="checkPassword()" v-model="password"/>
        </div>
        <span class="errMess" v-text="passwordErrorMsg">密码的长度至少为5位</span>
    </div>
    <div class="form-item">
        <div>
            <label>确认密码:</label>
            <input type="password" placeholder="请输入确认密码" @change="checkRePassword()" v-model="repassword"/>
        </div>
        <span class="errMess" v-text="repasswordErrorMsg">密码两次输入不一致</span>
    </div>
    <div class="form-item">
        <div>
            <label>用户邮箱:</label>
            <input type="text" placeholder="请输入邮箱" @change="checkEmail()" v-model="email"/>
        </div>
        <span class="errMess" v-text="emailErrorMsg">请输入正确的邮箱格式</span>
    </div>
    <div class="form-item">
        <div>
            <label>验证码:</label>
            <div class="verify">
                <input type="text" placeholder="" @change="checkCode()" v-model="code"/>
                <img src="../../static/img/code.bmp" alt=""/>
            </div>
        </div>
        <span class="errMess" v-text="codeErrorMsg">请输入正确的验证码</span>
    </div>
    <button class="btn">注册</button>
</form>
<script src="/bookstore-v1/static/script/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            username: "",//账户
            password: "",//密码
            repassword: "",//确认密码
            email: "",//邮箱
            code: "",//验证码
            usernameErrorMsg: "",//账户的错误提示信息
            passwordErrorMsg: "",//密码的错误提示信息
            repasswordErrorMsg: "",//确认密码的错误提示信息
            emailErrorMsg: "",//邮箱的错误提示信息
            codeErrorMsg: ""
        },
        methods: {

            /**
             * 根据指定正则表达式校验指定的内容
             * @param reg : 指定正则表达式
             * @param content : 指定的内容
             * @returns {boolean}
             */
            checkInfo(reg, content) {
                if (reg.test(content)) {
                    //格式合法，没有错误提示信息
                    return true;
                } else {
                    //格式不合法，有错误提示信息
                    return false;
                }
            },

            /**
             * 校验账户 : 用户名应为6~16位数字和字母组成
             */
            checkUsername() {
                var reg = /^[0-9a-zA-Z]{6,16}$/;
                var flag = this.checkInfo(reg,this.username);
                this.usernameErrorMsg = flag ? "" : "用户名应为6~16位数字和字母组成!";
                return flag;
            },
            /**
             * 校验密码 : 密码的长度至少为5位
             */
            checkPassword() {
                var reg = /^.{5,}$/;
                var flag = this.checkInfo(reg,this.password);
                this.passwordErrorMsg = flag ? "" : "密码的长度至少为5位!";
                return flag;
            },
            /**
             * 校验确认密码 : 密码两次输入不一致
             */
            checkRePassword() {
                if (this.password == this.repassword) {
                    //两次密码一致，没有错误提示信息
                    this.repasswordErrorMsg = "";
                    return true;
                } else {
                    //两次密码不一致，有错误提示信息
                    this.repasswordErrorMsg = "密码两次输入不一致!";
                    return false;
                }
            },
            /**
             * 校验邮箱 : 请输入正确的邮箱格式
             */
            checkEmail() {
                var reg = /^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/;
                var flag = this.checkInfo(reg,this.email);
                this.emailErrorMsg = flag ? "" : "请输入正确的邮箱格式!";
                return flag;
            },
            /**
             * 校验验证码 : 请输入正确的验证码
             */
            checkCode() {
                var reg = /^[0-9a-z]{5}$/;
                var flag = this.checkInfo(reg,this.code);
                this.codeErrorMsg = flag ? "" : "请输入正确的验证码!";
                return flag;

            },

            checkRegist() {
                //检查用户、密码、确认密码、邮箱、验证码，只要有一个不合法，就禁止表单提交
                if (!this.checkUsername() || !this.checkPassword() ||
                    !this.checkRePassword() || !this.checkEmail() ||
                    !this.checkCode()) {
                    event.preventDefault();
                }
            }

        }
    })


</script>