投票系统首页（HTML+jQuery）

描述

最近在用java写投票系统，边学习边实践，这是一篇关于注册的文章，代码比较基础，记录下成长。

head模块

<base href="http://localhost:8083/book_test/">
    <link type="text/css" rel="stylesheet" href="static/css/style.css">
    <img src="static/img/companylog.png" title="yoka" alt="youka" border="0" width="211" height="78"/>

<script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>

1. base："http://localhost:8083/book_test/ 是当前项目路径—指到web目录下，是下文中所有链接的默认前缀

2. link：加载css样式，比如颜色，字体大小，行间距等

3. img：static目录是web目录下的一级目录，在此目录下找到对应的图片，border是图片四周边缘的黑色细线
   .
   现在设置border为1，四周会出现很细的一条黑线。width和height代表图片的长和宽

4. 当我们在代码中引用jQuery时，需要提前引入jQuery插件，大家可以百度下，然后放到src路径下。

 body {
            background-image:url("static/img/background.jpg");
            /*style=" background-repeat:no-repeat ;*/
            background-size:100% 100%;
            background-attachment: fixed;"
        }

5. background-image：设置页面的背景图，当发现图片铺满或者没有铺满页面时，可以设置background-size为100%解决此问题。

jQuery模块

 <script type="text/javascript">
        $(function () {
            $("#sub_btn").click(function () {
                //获取用户名并校验
                var usernameText = $("#username").val();
                var usernamePatt = /^\w{5,12}$/;
                if (!usernamePatt.test(usernameText)){
                        //提示用户结果
                    $("span.errorMsg").text("用户名不合法");
                    return false;
                }

                var passwordText = $("#password").val();
                var passwordPatt = /^\w{5,12}$/;
                if (!passwordPatt.test(passwordText)){
                    //提示用户结果
                    $("span.errorMsg").text("输入密码不合法");
                    return false;
                }

                var repassword = $("#repassword").val();
                if (repassword != passwordText){
                    $("span.errorMsg").text("两次密码不一致");
                    return false;
                }

                //校验邮箱是否合法
                var email = $("#email").val();
                var emailpatt = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/;
                if (!emailpatt.test(email)){
                    $("span.errorMsg").text("邮箱输入错误");
                    return false;
                }

                var code = $("#code").val();
                code = $.trim(code);
                //写死验证码
                var num = "7364";
                if (code != num){
                    $("span.errorMsg").text("验证码输入错误");
                    return false;
                }else {
                    // alert("注册成功!")
                }
            })


        })

大家能发现，jQuery代码和java代码很类似。

1. (function() {})，即 $(document).ready(function()是在DOM文件加载后执行的，此时整个页面均可见。这时候操作页面元素，能保证元素存在。可能会对DOM有点疑问，DOM其实就是一个 html 页面的标签树（下图网络截取）。

   整个HTML可以看成一个DOM树，里面的包含所有的属性元素
   

2. 当点击提交按钮（id=sub_btn），前端校验传参是否正确。

   2.1 声明变量统一用var，不像java是强类型语言，在js中，无论是数值，字符串，数组等都是一样。
   var usernameText = $("#username").val();
   获取昵称的值，val()是用来获取值的方法。
   这时应该有小伙伴会问：val()和value()有什么区别呢？
   val()是在有jQuery插件时使用，value()是在没有jQuery插件时也能用，val()是jQuery根据原生JS里面的value写出来的函数。

   2.2 var usernamePatt = /^\w{5,12}$
   用户名和密码在这里统一使用的是5-12位数字和字母的组合， /^\w{5,12}$/是正则表达式，大家可以百度了解下。、

   2.3 在这里的验证码，目前前端是写死的一张图片：
   哈哈哈，骚不骚，后期改成动态的验证码，网上有很多现成的库，引用一下就行了。
   

   2.4 $(“span.errorMsg”).text(“邮箱输入错误”);大家可能都知道这是一句提示，提示在哪里呢？
   
   这是获取到用户的输入后，通过jQuery判断传参格式是否正确返回的提示，通过span.errorMsg获取到提示的位置，下面body里面会看到。

body模块

<h2>请校验信息</h2>
                        <span class="errorMsg" style="color: red"></span>
                    </div>
                    <div class="form">
                        <form action="registerServlet" method="post">
                            <label>用户名称：</label>
                            <input class="itxt" type="text" placeholder="请输入手机号" autocomplete="off"
                                   tabindex="1" name="username" id="username"/>
                            <br/>
                            <br/>
                            <label>输入密码：</label>
                            <input class="itxt" type="password" placeholder="5-12数字和字母组合" autocomplete="off"
                                   tabindex="1" name="password" id="password"/>
                            <br/>
                            <br/>
                            <label>确认密码：</label>
                            <input class="itxt" type="password" placeholder="请再次输入密码" autocomplete="off"
                                   tabindex="1" name="repassword" id="repassword"/>
                            <br/>
                            <br/>
                            <label>电子邮箱：</label>
                            <input class="itxt" type="text" placeholder="请输入邮箱账号" autocomplete="off"
                                   tabindex="1" name="email" id="email"/>
                            <br/>
                            <br/>
                            <label style="padding-left: 100px">验证码：</label>
                            <input class="itxt" type="text" style="..." id="code" name="code" >
                            <img alt="" src="static/img/code.png" height="30" width="80" style="...">
                            <br/>
                            <br/>
                            <input type="submit" value="注册" id="sub_btn">
                            <input type="submit" value="登录" name="login" id="login">

1. 我们看下这句：action=“registerServlet” method=“post” ---- action是我们在java中web.xml配置的地址，通过action页面会找到java对应的方法进行处理。

2. " placeholder"—是用来控制输入框中默认置灰的字符，提示用户输入那种类型的参数.

3. 有同学会问，name和id的区别是什么呢？ 使用过selenium的同学都知道：document.getElementById()，当我们获取页面元素定位的时候，首选id，因为Id是唯一的，可以准确的找到元素的位置，我们也建议前端同学尽可能多的在每个元素前面加上id属性；但是name是可以重复的，name的作用是提交数据的，提供给表单用，可以重复，java中servlet接受前端页面的参数：req.getParameter(" ")，如果没有name属性，后端将收不到对应的值，则不能进行对应的处理。

4. 当type=“submit”，通常设置为提交按钮，type=“text”，为文本输入框，除此之外type可以为checkbox，用来定义复选框，
   type=“password”，定义密码框，type=“radio”，定义单选按钮。

总结

多总结，多输出，会体现很多的不足，早暴露，早解决，奥利给！！！