登陸註冊——註冊輸入驗證

時間 2019-11-11

標籤登陸註冊輸入驗證简体版

原文原文鏈接

上次講了登陸註冊問題的數據庫表怎麼建，以及具體有哪些內容。今天主要講一下注冊的表單驗證。咱們常常上網各類登陸註冊的時候應該已經注意過就是有時候密碼有要求，好比輸入6-20位密碼。還有確認密碼，必須和密碼輸入一致的時候才行。郵箱也是，郵箱的格式不能出錯。當以上格式有誤的時候就不能提交表單，還有若是還有必填項目沒有填的話也不能夠提交表單。html

一看見判斷輸入框的格式還有位數限制時咱們首先就應該想到正則表達式。ajax

下面咱們來邊看代碼表講解。正則表達式

這個就是html的頁面代碼，咱們用的是AngularJS來寫的。佈局用了Bootstrap。數據庫

<body>

<div class="container" ng-controller="contentController">

    <div class="row r1">

        <form role="form" id="form">

            <p>註冊</p>

            <div class="form-group">

                <label for="name">用戶名：</label>

                <input type="text" ng-blur="testUser()" ng-model="name" class="form-control" id="name" placeholder="Enter name">

                <span ng-class="{redText:isRedName}">{{username_info}}</span>

            </div>

            <div class="form-group">

                <label for="pwd">密碼：</label>

                <input type="password" ng-model="pwd" ng-blur="testPwd()" class="form-control" id="pwd" placeholder="Password">

                <span ng-class="{redText:isRedPwd}">{{pwd_info}}</span>

            </div>

            <div class="form-group">

                <label for="confirmPwd">確認密碼：</label>

                <input type="password" ng-blur="testConfirmPwd()" ng-model="confirmPwd" class="form-control" id="confirmPwd" placeholder="Confirm password">

                <span ng-class="{redText:isRedConfirmPwd}">{{confirmPwd_info}}</span>

            </div>

            <div class="form-group">

                <label for="email">郵箱：</label>

                <input type="email"  ng-model="email" ng-blur="testEmail()" class="form-control" id="email" placeholder="Enter email">

                <span ng-class="{redText:isRedEmail}">{{email_info}}</span>

            </div>

            <div class="form-group">

                <label for="sex">性別：</label>

                <input type="text" ng-blur="testSex()" ng-model="sex" class="form-control" id="sex" placeholder="Enter sex">

                <span ng-class="{redText:isRedSex}">{{usersex_info}}</span>

            </div>

            <button type="button"  id="submit" ng-click="register()" class="btn btn-default">Submit</button>

            <div id="infoBox">

                <span ng-model="info" id="info">{{register_info}}</span>

            </div>

        </form>

    </div>

</div>

</body>

View Code

先看用戶名的判斷：ide

ng-blur="testUser()"就是鼠標離開用戶名輸入框時調用testUser()函數函數

testUser()函數以下：佈局

$scope.testUser=function(){

            var reg=/^[A-Za-z0-9]\w{5,14}$/;

            if($scope.name && reg.test($scope.name)){

                $scope.username_info="√";

                $scope.usernameIsError=false;

                $scope.isRedName=false;

            }

            else{

                $scope.username_info="×";

                $scope.usernameIsError=true;

                $scope.isRedName=true;

            }

View Code

正則表達式表示用戶名爲以字母或數字開頭的6-15位包括下劃線的任何單詞字符。在輸入框後面加span字段來標誌輸入是否正確，定義爲username_info，span定義一個類ng-class="{redText:isRedName}"，當輸入符合正則表達式時，$scope.isRedName=false;就是span輸入「√」，顏色爲綠，相反輸入「×」，顏色爲紅。效果圖以下：spa

密碼判斷：3d

$scope.testPwd=function(){

            var reg=/^.{6,15}$/;

            if($scope.pwd && reg.test($scope.pwd)){

                $scope.pwd_info="√";

                $scope.pwdIsError=false;

                $scope.isRedPwd=false;

            }

            else{

                $scope.pwd_info="×";

                $scope.pwdIsError=true;

                $scope.isRedPwd=true;

            }

}

View Code

看正則表達式表示咱們須要輸入6-15位的任意字符便可。code

效果圖以下：

輸了17位的狀況：

輸了10位的狀況：

確認密碼：

$scope.testConfirmPwd=function(){

            if($scope.pwd==$scope.confirmPwd && $scope.pwd){

                $scope.confirmPwd_info="√";

                $scope.confirmPwdIsError=false;

                $scope.isRedConfirmPwd=false;

            }

            else{

                $scope.confirmPwd_info="×";

                $scope.confirmPwdIsError=true;

                $scope.isRedConfirmPwd=true;

            }

        };

View Code

如上，咱們只須要判斷確認密碼輸入框和密碼輸入框一致而且密碼輸入框不爲空時就是正確的。效果圖以下：

郵箱輸入：

$scope.testEmail=function(){

            var reg=/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;

            if($scope.email && reg.test($scope.email)){

                $scope.email_info="√";

                $scope.emailIsError=false;

                $scope.isRedEmail=false;

            }

            else{

                $scope.email_info="×";

                $scope.emailIsError=true;

                $scope.isRedEmail=true;

            }

        };

View Code

正則表達式寫了郵箱的樣式，你們平時寫代碼的時候正則表達式不清楚的話能夠本身上網查一下正則表達式該怎麼寫。

效果圖以下：

關於性別我沒有用input type=」radio」來作，我用的是input type=」text」來作的。只是限定了只能輸入「男」或者「女」。

 $scope.testSex=function(){

            if($scope.sex && $scope.sex=="男"||$scope.sex=="女"){

                $scope.usersex_info="√";

                $scope.usersexIsError=false;

                $scope.isRedSex=false;

            }

            else{

                $scope.usersex_info="×";

                $scope.usersexIsError=true;

                $scope.isRedSex=true;

            }

        };

View Code

效果圖以下：

各項判斷大體就是這樣寫的，寫好提交到後臺就須要用到ajax了。咱們下一篇再來說ajax的寫法。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。