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

时间 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的写法。