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的组合方式。

转载于:https://www.cnblogs.com/FineDay/p/7255689.html