登录注册——注册输入验证

上次讲了登录注册问题的数据库表怎么建，以及具体有哪些内容。今天主要讲一下注册的表单验证。我们经常上网各种登录注册的时候应该已经注意过就是有时候密码有要求，比如输入6-20位密码。还有确认密码，必须和密码输入一致的时候才行。邮箱也是，邮箱的格式不能出错。当以上格式有误的时候就不能提交表单，还有如果还有必填项目没有填的话也不可以提交表单。

一看见判断输入框的格式还有位数限制时我们首先就应该想到正则表达式。

下面我们来边看代码表讲解。

这个就是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

先看用户名的判断：

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输入“√”，颜色为绿，相反输入“×”，颜色为红。效果图如下：

密码判断：

$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位的任意字符即可。

效果图如下：

输了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的写法。