註冊

• 介面如圖

  

• 前端驗證

  • html頁面程式碼

		<form id="form_reg">
                    <div>
                        <input type="text" id="account" name="account" placeholder="請輸入郵箱" />
                    </div>
                    <div class="isMale">
                        <input type="radio" name="male" id="male" value="true" checked><label for="male">男</label>&nbsp;&nbsp;
                        <input type="radio" name="male" id="female" value="false"><label for="female">女</label>
                    </div>
                    <div>
                        <input type="password" id="password" name="password" placeholder="請輸入密碼" />
                    </div>
                    <div>
                        <input type="password" id="repeatPassword" name="repeatPassword" placeholder="請重複密碼" />
                    </div>
                    <div>
                        <table border="0" height="60px">

                            <tr>
                                <td><input type="text" id="yzm" name="yzm" style="width: 100%; height: 40px; display: inline-block;"></td>
                                <td><p style="width: 20px;"></p></td>
                                <td> <img src="/doGet" alt="" id="captcha1" onclick="refreshCaptcha()" style="height: 40px; width: 100%; vertical-align: middle;">
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div>
                        <input id="btnSubmit" type="submit" value="註冊"><br><br>
                    </div>

                </form>
 

 - JQuery實現前端驗證

				 <script>

        function refreshCaptcha(){
            var ran = Math.floor(Math.random() * 100)
            $('#captcha1').attr('src','/doGet?' + ran);
        }

        $('#btnSubmit').on('click',function(event){
            event.preventDefault();

            if ($('#account').val().trim().length < 1) {
                layer.msg('請選擇或填寫郵箱！');
                $('#account').focus();
                return;
            }
            var reg1 = /^[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/;
            var input1 = $('#account').val();
            if(!reg1.test(input1)){
                layer.msg('郵箱格式錯誤，請輸入正確郵箱');
                return;
            }

            if ($('#password').val().trim().length < 1) {
                layer.msg('請填寫密碼！');
                $('#password').focus();
                return;
            }
            var pass = /^[a-zA-Z]\w{5,17}$/;
            var input2 = $('#password').val();
            if(!pass.test(input2)){
                layer.msg('密碼長度要在6~18位之間,且必須以字母開頭！')
                return;

            }
            if ($('#repeatPassword').val().trim().length < 1) {
                layer.msg('請填寫確認密碼！');
                $('#repeatPassword').focus();
                return;
            }

            if (($('#repeatPassword').val().trim())!=($('#password').val().trim())) {
                layer.msg('兩次密碼填寫不一致！');
                $('#repeatPassword').focus();
                return;
            }
            if ($('#yzm').val().trim().length < 1) {
                layer.msg('請填寫驗證碼！');
                $('#yzm').focus();
                return;
            }


            $.post('/api/register', $('#form_reg').serialize(), function(res) {
                if(res.code == 200){
                    setTimeout(function(){
                        location.reload();
                    },2000);
                    layer.msg('註冊成功，請前往郵箱進行啟用登入！')
                }else{
                    //$('.error-message').text(res.message);
                    layer.msg(res.message)
                }

            })

        })

    </script>
 

• 後臺驗證

  • 前端後臺使用的連線方式是MyBatis；
  • 後臺驗證程式碼如下：

	  String regex = "^([\\w-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([\\w-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)$";
        if( !match(regex,account)){
            return new JSONResult(400,"郵箱格式錯誤!");
        }

        if(!password.equals(repeatPassword)){
            message ="兩次輸入密碼不一致";
        }
        if(!yzm.equals(varCode)){
           message = "驗證碼輸入不正確";

        }
 

• 郵箱啟用功能，需要匯入郵箱寫郵件的依賴、許可權等，此處不詳細介紹，

	   WriteEmail.emailSend(user.getEmail(), "http://localhost:8088/" + salt);

登入

• 登入頁面如下：

  

• 前端驗證，程式碼如下：

  • Form表單程式碼

	<form id="form_login">
                    <div>
                        <input type="text" id="account" name="account" placeholder="請輸入郵箱">
                    </div>
                    <div>
                        <input type="password" id="password" name="password" placeholder="請輸入密碼">
                    </div>

                    <div>
                        <input id="btnLogin" type="submit" value="登入">
                    </div>
	</form>

 - Jquery驗證，

	<script>
        $('#btnLogin').on('click',function(event){
            event.preventDefault();
            if ($('#account').val().trim().length < 1) {
                layer.msg('請填寫郵箱或手機號')
                $('#account').focus();
                return;
            }
                var reg = /^1[34578]\\d{9}$/;
                var reg2 = /^[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/;
                var input2 = $('#account').val();
                var input1 = $('#account').val();
                if(!reg.test(input1)&&!reg2.test(input2)){
                    layer.msg('請輸入正確的郵箱或者手機格式！')
                }

            if ($('#password').val().trim().length < 1) {
                layer.msg('請選擇或填寫密碼！');
                $('#password').focus();
                return;

            }

            $.post('/api/login', $('#form_login').serialize(), function(res) {
                if(res.code == 200){
                    setTimeout(function(){
                        location.href = '/index';
                    },2000);
                    layer.msg('登入成功，正在跳轉')
                }else{
                    //$('.error-message').text(res.message);
                    layer.msg(res.message)
                }

            })

        })

    </script>
    

• 後臺驗證，程式碼如下：

	  String mobile = "^1[34578]\\d{9}$";

        String regex = "^([\\w-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([\\w-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)$";
        System.out.println(match(regex,account));
        if( !match(regex,account) && !match(mobile,account)){
           return new JSONResult(400,"郵箱或手機號格式錯誤!");

       }else {

           User user = userService.login(account, password);
           log.info("user", user);
           if(user==null){
               return  new JSONResult(400,"賬號或密碼錯誤！");
           }else {
               if(user.getStatus()!=2){
                   return  new JSONResult(400,"郵箱未註冊或未啟用!");
               }

• 總結：
  驗證需要前端後端都進行驗證，不能感覺前端驗證了就安全了，bug是未知的，風險就是未知的，可能會導致不可挽回的錯誤，在驗證的同時，不呼叫資料庫來實現驗證，上線的專案，資料庫注入一樣的危險！！！