登录注册案例二

这个项目的登录注册表单最开始想当然的用了blur+focus，功能实现是实现了，然而那个用户体验，啊，有这种东西？

最近又开始做表单，谷歌了一下怎样优雅写表单然后发现了AngularJs。。。慕课上啃了一下验证视频然后开工用ng。刚好这个项目客户不满意验证表单这里，上面让我改，改就改咯，于是就用上了ng。体验感觉上是上去了，IE8那个兼容不想管了orz。

首先引入ng，

然后在body上加上这句

ng-app="validationApp" ng-controller="mainController"

创建一个js文件放自己的代码，也不知道这么写好不好，反正能实现。。。。把登录注册什么的分开提交。暂时没研究出来怎么把ng和ajax提交一起写，所以目前只是用ng来判断这个表单能否提交点击。

//ng代码
var validationApp = angular.module('validationApp', []);

// create angular controller
validationApp.controller('mainController', function($scope) {
     //登录表单数据初始化
     $scope.logindata = {};
    // 登录表单提交            
    $scope.submitloForm = function(isValid) {
     //登录表单数据打印
     // console.log($scope.logindata);
        // 通过前端页面验证
        if (isValid) {
            // alert('登录成功');

        }
 
    };
    //注册表单数据初始化
    $scope.registdata = {};
    // 注册表单提交            
    $scope.submitreForm = function(isValid) {
    
        // 通过前端页面验证
        if (isValid) {
            // console.log($scope.registdata);
         //    alert('注册成功');
        }
    
    };
    //忘记密码表单数据初始化
    $scope.forgetdata = {};
     // 忘记密码表单提交            
    $scope.submitfoForm = function(isValid) {
    
        // 通过前端页面验证
        if (isValid) {
           // alert('忘记密码');
           // console.log($scope.forgetdata);
        }
    
    };


 
});
validationApp.directive('compare',function(){ 
    var o = {}; 
    o.strict= "AE"; 
    o.scope = { orgText:"=compare" } 
    o.require = "ngModel"; 
    o.link = function(sco,ele,att,con){ 
        con.$validators.compare = function(v){ 
            return v == sco.orgText; 
        } 
        sco.$watch("orgText",function(){ 
            con.$validate(); 
        }); 
    } 
    return o; 
})

提交ajax代码

//注册按钮点击事件
$("#regist").click(function(){
    var phone = $("#phone").val();
    var password = $("#password").val();
    var qq = $("#qq").val();
    var captcha = $("#captcha").val();
    
    if ($("#phone").val()=="" || $("#password").val()=="") {
        
        alert("请完善注册信息！");
        $("#phone").focus();
    } else {
        
        $.post("{PURL('login/regist')}",{ 'phone':phone,'password':password,'captcha':captcha },function(data){
          if (data == 2) {
           alert("注册成功！可以去登录了哟！");
           window.location.href="{PURL('login')}";
          }else{
           alert(data)
          }
        })
        
    }
     
})
function setTimes(obj){
    if ($("#phone").val()=="") {
          $("#phone").next("em").html("手机号码不能为空！");
          $("#phone").focus();
          return
    }else{
           /*判断手机号是否正确*/
           var myreg=/^1(3|5|7|8)\d\d\d\d\d\d\d\d\d$/;   
           if(!myreg.test($('#phone').val())){
               $("#phone").next("em").html("手机号码错误！");
                 $("#phone").focus();
                return
           }else{
               $("#phone").next("em").html("");
           }
       }
       var phone = $("#phone").val();
    $.post("{PURL('login/sms')}",{ "phone":phone },function(data){
        if (data==1) {
            setTime(obj)
        } else {
            $("#phone").next("em").html(data);
        }
    })

}

倒计时函数,【随手污染了全局

var count = 60;
function setTime(obj) {
    if (count==0) {
        obj.removeAttribute("disabled");
        obj.value = "获取验证码";
        count = 60;
        return
    } else {
        obj.setAttribute("disabled",true);
        obj.value = "重新获取（"+count+"）";
        count--;
    }

setTimeout(function(){
    setTime(obj)}
    ,1000);
}

贴一个注册页面的表单

<form name="registForm" 
               ng-submit="submitreForm(registForm.$valid)" 
               novalidate>
                          <div class="form_control">
                            <input class="required required1" type="text" name="phone" id="phone" placeholder="手机号码" ng-model="registdata.phone" 
                         ng-pattern="/^1(3|5|7|8)\d\d\d\d\d\d\d\d\d$/"
                         required >
                         <em ng-show="registForm.phone.$invalid && registForm.phone.$dirty" >手机号码输入错误</em>
                            <em ng-show="registForm.phone.$error.required&&
                                      registForm.phone.$touched" >手机号码不可为空</em>
                          </div>
                          <div class="form_control">
                           <input class="required" type="password" name="password" id="password" placeholder="密码"
                           ng-model="registdata.password" 
                           required
                           ng-minlength="6" 
                           ng-maxlength="20"
                           ng-pattern="/^\w+$/">
                           <em ng-show="registForm.password.$error.minlength||registForm.password.$error.maxlength" >密码长度在6到20位之间</em>
                           <em ng-show="registForm.password.$error.pattern" >密码由数字、26个英文字母或者下划线组成</em>
                           <em ng-if="registForm.password.$error.required&&
                                      registForm.password.$dirty" >密码不可为空</em>
                           </div>
                       
                          <div class="form_control2">
                            <input class="capipt required" type="text" name="captcha" id="captcha" placeholder="验证码" required ng-model="registdata.captcha">
                            <em ng-if="registForm.captcha.$error.required&&
                                      registForm.captcha.$dirty" >验证码不可为空</em>
                              <input type="button" id="captchabtn" value="获取验证码" class="login-btn btn" onclick="setTimes(this);">
                          </div>
                          <div class="form_control">
                            <input class="required" type="text" name="qq" id="qq" placeholder="QQ(非必填)"
                            ng-pattern="/^\w+$/"
                            ng-model="registdata.qq">
                            <em ng-if="registForm.qq.$error.pattern" >qq号码错误！</em>
                            
                          </div>
                         
                          <div class="form_control">
                              <input type="submit" id="regist" value="注册" class="login-btn btn" ng-disabled="registForm.$invalid">
                          </div>
                        </form>

 

转载于:https://www.cnblogs.com/liyinSakura/p/5783449.html