zoukankan      html  css  js  c++  java
  • angular validation 使用总结

    我由于制作登陆界面,用到了angular-validation,结合ng-cookies,实现记住账户密码的功能。文档是https://github.com/hueitan/angular-validation/blob/master/API.md

    该文档挺详细的介绍了angular-validation的使用方式。我因为英文不好,理解的不是很仔细。但是总结了以下的使用经验。

    1 首先在模块中注入validation模块 

      var app = angular.module("zdwq",["ui.router","ui.bootstrap","ngCookies","validation"]);

    2 config.js文件中配置config ,设置验证规则的表达式以及文字

      app.config(['"$validationProvider",function($validationProvider){

        var expression = {
          username:/^1[3|4|5|7|8]d{9}$/,
          password: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,18}$/,
          required:function(value){
             return !!value       
          }
          };
        var defaultMsg = {
          username:{
            success:"",
            error:"必须是手机号"
          },
          password:{
            success:"",
            error:"长度不能小于8位,不能大于18位"
          }
        };

        $validationProvider.setExpression(expression).setDefaultMsg(defaultMsg);

    3  html结构中使用验证

      <form name="loginForm">
        <p class="pr"><input name="username_account" validator="username" type="text" class="login-name" placeholder="请输入账号" ng-model="user.username" valid-method="blur,submit"></p>
        <p class="pr"><input name="password_account" validator="password" type="password" class="login-pwd" placeholder="请输入密码" ng-model="user.password" valid-method="blur,submit"></p>
        <p><label class="remember-label"><i class="db vm login-checkbox" ng-class="user.remembered?'checked':''" alt=""></i><input type="checkbox" hidden class="login-remember" ng-model="user.remembered">记住账号</label></p>
        <p><button class="login-btn" ng-click="submit(loginForm)" validator-submit="loginForm">登录</button></p>
      </form>

      注意 (1) form指定名字,方便ng-click调用函数作为参数使用$validation.validate(form).success(function(){}).error(function(){});

          $scope.submit = function(form){
            $validation.validate(form).success(function(){
              $http.get("data/login.json").then(function(){
                if($scope.user.remembered){
                  $cookies.put("zdwq_username",$scope.user.username);
                  $cookies.put("zdwq_password",$scope.user.password);
                }
                else{
                  if($cookies.get("zdwq_username")) $cookies.remove("zdwq_username");
                  if($cookies.get("zdwq_password")) $cookies.remove("zdwq_password");
                }
                $window.sessionStorage.setItem("haslogined",true) // 不关闭页面的情况下,刷新页面状态不变
                alert("登录成功");
                $rootScope.isUserAuth = true;
              },function(){
                alert("登录失败")
              })
            }).error(function(){
              // alert("请输入正确的账号或密码")
            })
          }


        (2)  input 中指定validator,表示使用哪个验证规则,另外input中可指定valid-method 表示采用哪种方式对input使用规则,有watch,blur,submit,submit-only方式,默认是watch。需要在点击登录按钮验证的时候,需要指定submit,submit-only 中的一种方式,但是需要为input指定name(没有限制名字的要求)  .为了取得好看的效果,我制作的页面中使用了blur与submit的组合方式

  • 相关阅读:
    ABAP接口用法
    监听textarea数值变化
    The first step in solving any problem is recognizing there is one.
    Wrinkles should merely indicate where smiles have been.
    God made relatives.Thank God we can choose our friends.
    Home is where your heart is
    ABAP跳转屏幕
    Python 工具包 werkzeug 初探
    atom通过remote ftp同步本地文件到远程主机的方法
    Mongodb学习笔记一
  • 原文地址:https://www.cnblogs.com/FineDay/p/7255689.html
Copyright © 2011-2022 走看看