www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

Web前端js完成登记系统的实例详解,输入框实现自

2019-06-21 03:16 来源:未知

此插件使用angular.js、JQuery实现。(jQuery的引入需在angular 之前)

需求

前言

  用户可以 在输入框输入数据后验证 必填项、整数型、浮点型验证。

  •     Name 必填
  •     Username 非必填,最小长度3,最大长度8
  •     Email 非必填,但必须是合法的email
  •     验证未通过的表单不能提交
  •     显示一个必填或者非法email格式的错误信息
  •     如果正确提交就弹出一个祝贺信息

相信大家在做项目里经常需要登录注册,那么在用angularjs该如何实现。下面让我们通过angualr.js来实现注册系统表单验证。

  如果在form 里面的输入框验证,可以点击 提交按钮后,实现 必填项验证。

现在知道我们的目标了吧,让我们一起来构建这个东西吧.

Angular下载地址:

效果图如下:

Angular 的表单属性 $valid, $invalid, $pristine, $dirty

首先看一下页面效果(通过bootstrap实现的布局样式):

Web前端 1

Angular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息,并且应用到了表单和输入.
属性类  
 描述

Web前端 2 

(1)验证未通过时,背景标红等样式为  

  • $valid  ng-valid  Boolean 告诉我们这一项当前基于你设定的规则是否验证通过
  • $invalid  ng-invalid  Boolean 告诉我们这一项当前基于你设定的规则是否验证未通过
  • $pristine  ng-pristine  Boolean 如果表单或者输入框没有使用则为True
  • $dirty  ng-dirty  Boolean 如果表单或者输入框有使用到则为True

当我们点击提交按钮时,会根据表单验证,若通过,则没有提示语句,若不通过,则会弹出响应提示语句,当然该功能可以通过其他简单方式实现,这里只是通过实战对angular进一步深入理解。

input.ng-invalid, select.ng-invalid {
   background-color: #ee82ee !important;
   border: 1px solid #CCC;
  }
  .qtip {
   position: absolute;
   max-width: 260px;
   display: none;
   min-width: 50px;
   font-size: 10.5px;
   line-height: 12px;
   direction: ltr;
  }
  .qtip-content {
   position: relative;
   padding: 5px 9px;
   overflow: hidden;
   text-align: left;
   word-wrap: break-word;
  }
  .qtip-rounded, .qtip-tipsy {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
  }
  .qtipmodal-ie6fix {
   position: absolute !important;
  }
  .box-shadow-tips {
   background-color: #F63;
   border-color: #F5A88F;
   color: white;
   -moz-box-shadow: 2px 2px 2px #969696;
   -webkit-box-shaow: 2px 2px 2px #969696;
   box-shadow: 2px 2px 2px #969696;
  }

Angular 也提供了有关表单及其输入框的类,以便你能够依据每一个状态设置其样式.
访问表单属性

实现方法如下:

  因为angular.js 内置验证未通过时,会自动为 标签 增加 .ng-invalid 样式,因为这里重写此样式

  •     方位表单: <form name>.<angular property>
  •     访问一个输入框: <form name>.<input name>.<angular property>

页面布局代码如下:

 input.ng-invalid, select.ng-invalid {
   background-color: #ee82ee !important;
   border: 1px solid #CCC;
  } 

设置我们的表单

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">    //设置按照edge浏览器渲染方式渲染
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> //设置页面宽度,缩放比例,用户不能缩放
 <title>注册</title>
 <link rel="stylesheet" href="bootstrap.min.css">
 <style>
  input {
   outline: none; //去掉chrome浏览器输入框内的蓝色边框
  }
 </style>
</head>
<body ng-app="myApp">
 <div ng-controller="myCtr">
  <div class="container">
   <h2 class="text-center">注册系统</h2>
   <div class="row">
    <form name="myForm" class="form-horizontal">
     <div class="form-group">
      <div class="col-xs-3 col-xs-offset-1">
       <lable for="username">用户名:</lable>
      </div>
      <div class="col-xs-8">
       <input id="username" type="text" ng-model="data.username" name="username" ng-required="true"> //ng-required="true"是设置输入框内必须填写内容,下同
      </div>
     </div>
     <div class="form-group">
      <div class="col-xs-3 col-xs-offset-1">
       <lable for="tel">电话:</lable>
      </div>
      <div class="col-xs-8">
       <input id="tel" type="text" ng-model="data.tel" name="tel" ng-pattern="/^1d{10}$/" ng-required="true"> //ng-pattren="/XXX/"是设置正则验证,下同

      </div>
     </div>
     <div class="form-group">
      <div class="col-xs-3 col-xs-offset-1">
       <lable for="address">地址:</lable>
      </div>
      <div class="col-xs-8">
       <input id="address" type="text" ng-model="data.address" name="address" ng-required="true">

      </div>
     </div>
     <div class="form-group">
      <div class="col-xs-3 col-xs-offset-1">
       <lable for="email">邮箱:</lable>
      </div>
      <div class="col-xs-8">
       <input id="email" type="text" ng-model="data.email" name="email" ng-pattern="/^([a-zA-Z0-9_-]) @([a-zA-Z0-9_-]) (.[a-zA-Z0-9_-]) /" ng-required="true">
      </div>
     </div>
     <div class="col-xs-8 col-xs-offset-4 text-danger" style="height:30px;overflow:hidden;">
      <p ng-show="myForm.username.$invalid && myForm.username.$dirty">请填写用户名</p>
      <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty">请填写正确电话</p>
      <p ng-show="myForm.address.$invalid && myForm.address.$dirty">请填写地址</p>
      <p ng-show="myForm.email.$invalid && myForm.email.$dirty">请填写正确邮箱</p>
      <p ng-show="showAllErr">请填写</p>
     </div>
     <div class="form-group">
      <div class="col-xs-12">
       <input class="btn btn-success" type="submit" style="width:100%" ng-click="check()">
      </div>
     </div>
    </form>
   </div>
  </div>

 </div>
<script src="angular.min.js"></script>
</body>
</html>

  (2)HTML 代码如下

我们将使用一个简单的表单来做演示.

如上页面布局代码,记得引入bootstrap.css;angular.js,ng-required;ng-pattern 功能等同于H5新属性:required; pattern, 另外还有disabled;readonly(ng-disbaled;ng-readonly),本文后面会介绍其用法。

<body ng-app="myApp">
<form name="baseInfoForm">
 <div ng-controller="testCtrl">
  <input type="text" ng-model="age" my-valid="r"><br>
  <input type="text" ng-model="name" my-valid="int fn:certCheck"><br>
  <input type="button" value="提交" ng-click="submit()">
 </div>
</form>
</body>

Web前端 3

js代码:

(3)此插件使用 directive myValid 实现

我们将需要两个文件:

var app = angular.module("myApp", []);
 app.controller("myCtr", function($scope) {
  $scope.data = {};      //存放用户输入的内容,便于后台调用
  $scope.showAllErr = false; //默认不显示提示信息
  $scope.check = function(){
   $scope.showAllErr= $scope.myForm.$invalid; //当内容不合法时,显示内容(此时$invalid=true),可以console.log($scope);找到$invalid,$dirty,$valid,$pristine
   if($scope.myForm.$valid){
    console.log($scope.data); //控制台打印用户输入的内容
   } 
  }11 })
app.directive('myValid', ['$parse', 'uiTipsFactory', 'uiValidFactory', function ($parse, tips, valid) {
  var uiValidAttrIdName = 'ui-valid-id';
  return {
   restrict: 'A',
   require: 'ngModel',
   link: function (scope, el, attrs, ctrl) {
    var validId = el.attr(uiValidAttrIdName);
    if (!validId) {
     validId = Math.guid();
     el.attr(uiValidAttrIdName, validId);
    }
    var getRules = function () {
     return attrs.myValid;
    };
    var lastOldRules;
    var validFn = function (value, oldRules) {
     var sp = '_';
     var rules = getRules();
     var r = valid.check(value, rules, scope, attrs.uiValidTips);
     if (lastOldRules && !oldRules) {
      oldRules = lastOldRules;
     }
     if (r.flag && oldRules) {
      rules = rules ? rules   ' '   oldRules : oldRules;
     }
     if (rules) {
      var arrInner = rules.split(' ');
      var i = 0;
      for (; i < arrInner.length; i  ) {
       var oneRule = arrInner[i];
       if (!oneRule.trim()) {
        continue;
       }
       ctrl.$setValidity(attrs.ngModel   sp   oneRule, r.flag ? true : oneRule != r.rule);
      }
     }
     if (!r.flag) {
      tips.on(el, r.msg);
     } else {
      tips.off(el);
     }
     return r.flag;
    };
    var init = function () {
     var rules = getRules();
     if (!rules) {
      return;
     }
     var parsers = ctrl.$parsers;
     if (parsers && parsers.length > 0) {
      parsers.clean();
     }
     parsers.unshift(function (value) {
      return validFn(value) ? value : undefined;
     });
    };
    scope.$watch(attrs.ngModel, function (newVal, oldVal) {
     if (newVal === oldVal) {
      return;
     }
     if (ctrl.$modelValue != undefined && (ctrl.$invalid || el.hasClass('ng-invalid'))) {
      validFn(ctrl.$modelValue);
     }
    });
    scope.$watch(getRules, function (newRules, oldRules) {
     init();
     lastOldRules = oldRules;
     if (ctrl.$modelValue === undefined || ctrl.$modelValue === null) {
      var needValid = false;
      el.hasClass('ng-invalid');
      var isValNaN = ctrl.$viewValue !== ctrl.$viewValue;
      if (ctrl.$invalid || (ctrl.$viewValue !== undefined && !isValNaN)) {
       needValid = true;
      }
      if (needValid) {
       ctrl.$setViewValue(ctrl.$viewValue);
      }
     } else {
      if (!ctrl.$dirty && attrs.dirtyCheck) {
       console.log('----');
      } else {
       validFn(ctrl.$modelValue, oldRules);
      }
     }
    });
   }
  }
 }]);
  1.     index.html 我们用来显示表单的代码
  2.     app.js 我们的Angular应用程序和控制器 (几乎没有任何代码)

注意:

  通过 监听 attrs.ngModel,验证规则 rules ,ctrl.$parser 来实现 输入框内容改变的响应。

Our Form Code index.html  

可以console.log($scope);找到$invalid , $dirty ,$valid , $pristine(意思:不合法,被修改,合法,没被修改)

  一旦使用此directive,则动态为当前输入框添加ID,以便在 验证通过后,改变输入框的验证背景信息。 

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <!-- CSS ===================== -->
  <!-- load bootstrap -->
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
  <style>
    body   { padding-top:30px; }
  </style>

  <!-- JS ===================== -->
  <!-- load angular -->
  <script src="http://code.angularjs.org/1.2.6/angular.js"></script> 
  <script src="app.js"></script>
</head>

<!-- apply angular app and controller to our body -->
<body ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">

  <!-- PAGE HEADER -->
  <div class="page-header"><h1>AngularJS Form Validation</h1></div>

  <!-- FORM -->
  <!-- pass in the variable if our form is valid or invalid -->
  <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->

    <!-- NAME -->
    <div class="form-group">
      <label>Name</label>
      <input type="text" name="name" class="form-control" ng-model="name" required>
    </div>

    <!-- USERNAME -->
    <div class="form-group">
      <label>Username</label>
      <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
    </div>

    <!-- EMAIL -->
    <div class="form-group">
      <label>Email</label>
      <input type="email" name="email" class="form-control" ng-model="email">
    </div>

    <!-- SUBMIT BUTTON -->
    <button type="submit" class="btn btn-primary">Submit</button>

  </form>

</div><!-- col-sm-8 -->
</div><!-- /container -->
</body>
</html>

打开控制台,找到console.log($scope);打印的内容,找到表单name字段,即可找到以上四个属性,同样找到表单内输入框中的name字段也可找到以上四个属性。

(4)验证逻辑处理 uiValidFactory

这里列出了一些关键点:

在此之前,我们要为表单添加name字段,比如我设置为 name="myForm", 所以即可找 myForm 即可,input同样

app.factory('uiValidFactory', ['$parse', 'uiTipsFactory', function ($parse, tips) {
  return {
   check: function (val, rules, $scope, defaultTips, extendParam) {
    if (!rules) {
     return {
      flag: true
     };
    }
    var rulesArr = rules.split(' '),
      isBlank = val === null || val === undefined || val === '' || (''   val === '');
    //如果不是必填项 且没有输入值 则清除提示框
    if ($.inArray('r', rulesArr) === -1 && isBlank) {
     return {
      flag: true
     }
    }
    var i = 0, len = rulesArr.length;
    for (; i < len; i  ) {
     var rule = rulesArr[i];
     if (!rule) {
      continue;
     }
     var flag = true;
     if ('r' === rule) {
      //如果是必填项,有值 返回true
      flag = !isBlank;
     } else if (rule.contains(':')) {
      //如果校验规则是 fn:ctrl.certCheck
      flag = this.checkRule(val, rule.split(/:/), $scope, extendParam);
     } else {
      //校验 规则是 int 用正则匹配 数字 邮箱 长度
      var pat = this.pats[rule];
      if (pat instanceof RegExp) {
       if (angular.isString(val)) {
        flag = this.mat(val, pat);
       }
      } else if (angular.isFunction(pat)) {
       flag = pat(val);
      } else {
       flag = false;
      }
     }
     //这是干什么的呢
     if (angular.isString(flag)) {
      return {
       flag: false,
       msg: flag,
       rule: rule
      }
     }
     if (flag === false) {
      var msg = this.getMsg(rule, defaultTips) || this.getMsg('tips.valid');
      console.log(msg);
      return {
       flag: false,
       msg: msg,
       rule: rule
      }
     }
    }
    return {
     flag: true
    }
   },
   checkRule: function (val, ruleArr, $scope, extendParam) {
    //ruleArr fn:certCheck
    var rule = ruleArr[0];
    if (rule === 'fn') {
     fnName = ruleArr[1];//指定被调函数的名字 certCheck
     var fn = $parse(fnName)($scope);
     if (!fn) {
      return true;
     }
     return fn.call($scope, val, extendParam);
    } else {
     return true;
    }
   },
   checkValidForm: function (formName) {
    //只检查必填项
    //使用属性筛选器 获得里面所有的元素
    var formContext = $('form[name="{0}"],[ng-form="{0}"],[data-ng-form="{0}"]'.format(formName)),
      validList = formContext.find('[my-valid]');//validList 不是数组,是伪数组
    if (!validList.length) {
     return;
    }
    var that = this,
      validFlags = [];
    validList.each(function () {
       var ele = $(this),
         val = ele.val(),
         ruleStr = ele.attr('my-valid');
       if (!ruleStr) {
        return true;
       }
       if (angular.isString(val)) {
        val = val.trim();
       }
       var validRules = ruleStr.split(' ');
       if ($.inArray('r', validRules) != -1 && !val) {
        var modelValue = ele.attr('ng-model') || ele.attr('data-ng-model');
        validFlags.push(modelValue);
        tips.on(ele, that.getMsg('r'));
       }
      }
    );
    return validFlags;
   },
   mat: function (val, pat) {
    if (!pat) {
     return;
    }
    return pat.test(val);
   }
   ,
   getMsg: function (rule, tips) {
    tips = tips || '';
    //可以在界面上直接写 tips
    if (tips && tips.contains(':')) {
     return tips;
    }
    var msg = this.msgs[rule];
    if (msg) {
     var params0 = tips.contains(':') ? tips.split(/:/)[0] : '';
     var params1 = '';
     if (rule.startsWith('min') || rule.startsWith('max')) {
      var ruleArr = rule.split(/:/);
      params1 = ruleArr[ruleArr.length - 1];
     }
     return msg.format(params0, params1);
    } else {
    }
   }
   ,
   regPat: function (code, pat, msg) {
    if (this.pat[code]) {
     return;
    }
    this.pats[code] = pat;
    this.msgs[code] = msg;
   }
   ,
   msgs: {
    'r': '必填',
    'int': '{0}必须为整数'
   }
   ,
   pats: {
    'int': /^[- ]?([0-9] )$/
   }
  }
 }
 ])
 ;
  •     novalidate: 它将会组织默认的HTML5验证,因为这会由我们自己来做(我们自己的将会更棒)
  •     我们在输入框上应用了ng-model,以便将来自表单的数据绑定到angular变量
  •     username上的ng-minlength 和 ng-maxlength会自己创建其规则
  •     name 输入框是必填的
  •     email 输入框有属性 type=”email”

Web前端 4 

       通过获取输入框 ele.myValid  验证规则,

验证规则

 Web前端 5

   1、如果是必填,则返回 标红此输入框,鼠标移上,则显示 验证信息 “必填””。

Angular 有很多验证规则,像是 tong-min leng than dng-max length.

下面是提示语部分,单独拿出来说一下:

   2、如果是整数、浮点型等验证,则通过 正则表达式进行验证。

 Angular还可以自己配置规则.  Angular输入指引上有说明 .  

<div class="col-xs-8 col-xs-offset-4 text-danger" style="height:30px;overflow:hidden;">
     <p ng-show="myForm.username.$invalid && myForm.username.$dirty">请填写用户名</p>
     <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty">请填写正确电话</p>
     <p ng-show="myForm.address.$invalid && myForm.address.$dirty">请填写地址</p>
     <p ng-show="myForm.email.$invalid && myForm.email.$dirty">请填写正确邮箱</p>
     <p ng-show="showAllErr">请填写</p>
</div>

      3、如果是最大(max)、最小(min),则自定义逻辑。

<input
  ng-model="{ string }"
  name="{ string }"
  required
  ng-required="{ boolean }"
  ng-minlength="{ number }"
  ng-maxlength="{ number }"
  ng-pattern="{ string }"
  ng-change="{ string }">
</input>

style="height:30px;overflow:hidden;">,设置只是显示一行;

  4、如果是 fn 验证,则根据 对应controller中函数进行验证。

现在建好了表单, 接着创建Angular应用和控制器,ng-app ng-控制器.
应用的 Codeapp.js

ng-show="myForm.username.$invalid && myForm.username.$dirty",默认状态下我们没有提交当然合法,而且也没有修改;又由于$scope.showAllErr = false;

  5、用户点击提交按钮,则 判断是否必填项,验证不通过,对应元素背景标红。

// app.js
// create angular app
var validationApp = angular.module('validationApp', []);

// create angular controller
validationApp.controller('mainController', function($scope) {

  // function to submit the form after all validation has occurred      
  $scope.submitForm = function(isValid) {

    // check to make sure the form is completely valid
    if (isValid) {
      alert('our form is amazing');
    }

  };

});

所以什么提示语也不现实,但是当这些条件一旦满足,myForm.username.$invalid=true  &&  myForm.username.$dirty=true,便会显示以上提示语中对应内容,至于

(5) 验证不通过,提示Factory---uiTipsFactory

 
使HTML5验证器的novalidate

显示那一条,根据对应的字段显示,若是username,那就是“请填写用户名”,email字段,那就……(字段即 name="XXX",自己为不同的输入框定义不同字段即可,当然了

app.factory('uiTipsFactory', function () {
  return {
   filterClass: function (ele, invalid) {
    if (invalid) {
     //如果验证不通过
     ele.removeClass('ng-valid').removeClass('ng-pristine').addClass('ng-invalid').addClass('ng-dirty');
    } else {
     ele.removeClass('ng-invalid').addClass('ng-valid');
    }
   },
   on: function (ele, msg) {
    var lastTip = ele.data('last-tip');
    if (lastTip && lastTip === msg) {
     return;
    }
    ele.data('last-tip', msg);
    this.filterClass(ele, true);
    var offset = ele.offset();
    if (!offset.top && !offset.left && ele.is('hidden')) {
     offset = ele.show().offset();
    }
    var id = ele.attr('ui-valid-id');
    if (!id) {
     id = Math.guid();
     ele.attr('ui-valid-id', id);
    }
    if (id.contains('.')) {
     id = id.replace(/./g, '_');
    }
    var top = offset.top,
      left = offset.left;
    var getTips = function () {
     var _tip = $('#vtip_'   id);
     if (_tip.length) {
      _tip.html(msg).css({
       'display': 'none',
       'top': top   'px',
       'left': left   ele.width()   10   'px'
      });
     } else {
      var html = '<div id="vtip_'   id   '" class="vtip qtip qtip-rounded box-shadow-tips">'  
        '<div class="qtip-content">'   msg   '</div>';
      $(html).css({
       'display': 'none',
       'position': 'absolute',
       'top': top   'px',
       'left': left   ele.width()   10   'px'
      }).appendTo($('body'));
     }
    };
    var bindTipsShow = function () {
     getTips();
     ele.unbind('mouseenter mouseleave').bind('mouseenter', function () {
      var _tip = $('#vtip_'   id);
      if (_tip.is(':hidden')) {
       _tip.show();
      }
     }).bind('mouseleave', function () {
      $('#vtip_'   id).hide();
     });
    };
    bindTipsShow();
   },
   off: function (ele) {
    ele.data('last-tip', '');
    this.filterClass(ele);
    var id = ele.attr('ui-valid-id');
    if (!id) {
     return;
    }
    if (id.contains('.')) {
     id = id.replace(/./g, '_');
    }
    $('#vtip_'   id).remove();
    ele.unbind('mouseenter mouseleave');
   }
  }
 });

我们将在我们的表单使用novalidate。这是一个很好的做法,因为我们将会自己处理验证。如果我们让我们的表单这样做,它看起来很丑陋。

上面提到过他们也有:$invalid , $dirty , $valid , $pristine 这四个属性)

   1、验证不通过,增加背景色,元素css处理如下

Web前端 6

若是什么也不填写,那就是表单不合法,即 $scope.myForm.$invalid=true,提示 “请填写”。

 ele.removeClass('ng-valid').removeClass('ng-pristine').addClass('ng-invalid').addClass('ng-dirty');

禁用提交按钮 ng-disabled

再说说ng-disabled;ng-readonly:

   验证通过,CSS处理如下  

现在真正的好戏上演了。我们开始使用Angular的属性 。首先让我们禁用我们的提交按钮。如果我们的表单是$invalid的,我们只想禁用它。  

将上述代码加入下面内容:

 ele.removeClass('ng-invalid').addClass('ng-valid');
<!-- index.html -->
...

  <!-- SUBMIT BUTTON -->
  <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>

...
 <div class="col-xs-8">
 <input id="address" type="text" ng-model="data.address" name="address" ng-required="true" ng-disabled="isDis">
 <button ng-click="myTogTwo()">toggTwo</button>
 </div>


 <div class="col-xs-8">
  <input id="tel" type="text" ng-model="data.tel" name="tel" ng-pattern="/^1d{10}$/" ng-required="true" ng-readonly="isWr">
  <button ng-click="myTogOne()">toggOne</button>
 </div>


$scope.isDis = false;
  $scope.isWr = false;
  $scope.myTogOne = function(){
   $scope.isWr = !$scope.isWr;
  }
  $scope.myTogTwo = function(){
   $scope.isDis = !$scope.isDis;
 }

 

只使用一点代码(ng-disabled),如果我们的表单是$invalid的,表单按钮将被禁用。
 这意味着,我们的name input 字段是必需的,并且email input字段需要一个有效的电子邮件。

便可以通过点击按钮实现输入框只读与可写、可用不可用之间的切换

2、背景提示语,则是在body上增加一个div层。

用 eng-show显示错误信息

Web前端 7 

(6)其他相关代码

ng-valid 和ng-invalid 会基于提供的表单规则自动验证输入的有效性.

补充两个事件:ng-change;ng-submit

var app = angular.module('myApp', []);
 app.controller('testCtrl', ['$scope', 'uiValidFactory', function ($scope, uiValidFactory) {
    $scope.certCheck = function (val) {
     if (val > 32) {
      return "数字太大了";
     }
     return true;
    };
    $scope.submit = function () {
     if (!uiValidFactory.checkValidForm($scope.baseInfoForm.$name)) {
     }
    };
   }]
 );
 Math.guid = function () {
  var a = "", b = 1;
  for (; b <= 32; b  ) {
   var c = Math.floor(Math.random() * 16).toString(16);
   a  = c;
   if (b === 8 || b === 12 || b === 16 || b === 20) {
    a  = '-';
   }
  }
  return a;
 };
 String.prototype.contains = String.prototype.contains || function (a) {
  return this.indexOf(a) != -1;
 };
 String.prototype.format = String.prototype.format || function () {
  var a = Array.prototype.slice.call(arguments);
  return this.replace(/{(d )}/g, function (c, b) {
   return a[b];
  })
 };

咱们在输入部分加一些错误信息,只要不等于$valid或是已经使用过的就行 (不能展示还没使用).  

ng-change:用来检测用户输入是否发生变化

   整个代码如下:

<!-- index.html -->
...

  <!-- NAME -->
  <div class="form-group">
    <label>Name</label>
    <input type="text" name="name" class="form-control" ng-model="name" required>
    <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
  </div>

  <!-- USERNAME -->
  <div class="form-group">
    <label>Username</label>
    <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
    <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
    <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
  </div>

  <!-- EMAIL -->
  <div class="form-group">
    <label>Email</label>
    <input type="email" name="email" class="form-control" ng-model="email">
    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
  </div>

...

ng-submit:用来检测表单提交事件,只可用于form元素(意只对表单本身有效)

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="jquery-1.11.1.js"></script>
 <script src="angular.js"></script>
 <style type="text/css">
  input.ng-invalid, select.ng-invalid {
   background-color: #ee82ee !important;
   border: 1px solid #CCC;
  }
  .qtip {
   position: absolute;
   max-width: 260px;
   display: none;
   min-width: 50px;
   font-size: 10.5px;
   line-height: 12px;
   direction: ltr;
  }
  .qtip-content {
   position: relative;
   padding: 5px 9px;
   overflow: hidden;
   text-align: left;
   word-wrap: break-word;
  }
  .qtip-rounded, .qtip-tipsy {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
  }
  .qtipmodal-ie6fix {
   position: absolute !important;
  }
  .box-shadow-tips {
   background-color: #F63;
   border-color: #F5A88F;
   color: white;
   -moz-box-shadow: 2px 2px 2px #969696;
   -webkit-box-shaow: 2px 2px 2px #969696;
   box-shadow: 2px 2px 2px #969696;
  }
 </style>
</head>
<body ng-app="myApp">
<form name="baseInfoForm">
 <div ng-controller="testCtrl">
  <input type="text" ng-model="age" my-valid="r"><br>
  <input type="text" ng-model="name" my-valid="int fn:certCheck"><br>
  <input type="button" value="提交" ng-click="submit()">
 </div>
</form>
</body>
<script type="text/javascript">
 var app = angular.module('myApp', []);
 app.controller('testCtrl', ['$scope', 'uiValidFactory', function ($scope, uiValidFactory) {
    $scope.certCheck = function (val) {
     if (val > 32) {
      return "数字太大了";
     }
     return true;
    };
    $scope.submit = function () {
     if (!uiValidFactory.checkValidForm($scope.baseInfoForm.$name)) {
     }
    };
   }]
 );
 Math.guid = function () {
  var a = "", b = 1;
  for (; b <= 32; b  ) {
   var c = Math.floor(Math.random() * 16).toString(16);
   a  = c;
   if (b === 8 || b === 12 || b === 16 || b === 20) {
    a  = '-';
   }
  }
  return a;
 };
 String.prototype.contains = String.prototype.contains || function (a) {
  return this.indexOf(a) != -1;
 };
 String.prototype.format = String.prototype.format || function () {
  var a = Array.prototype.slice.call(arguments);
  return this.replace(/{(d )}/g, function (c, b) {
   return a[b];
  })
 };
 app.factory('uiTipsFactory', function () {
  return {
   filterClass: function (ele, invalid) {
    if (invalid) {
     //如果验证不通过
     ele.removeClass('ng-valid').removeClass('ng-pristine').addClass('ng-invalid').addClass('ng-dirty');
    } else {
     ele.removeClass('ng-invalid').addClass('ng-valid');
    }
   },
   on: function (ele, msg) {
    var lastTip = ele.data('last-tip');
    if (lastTip && lastTip === msg) {
     return;
    }
    ele.data('last-tip', msg);
    this.filterClass(ele, true);
    var offset = ele.offset();
    if (!offset.top && !offset.left && ele.is('hidden')) {
     offset = ele.show().offset();
    }
    var id = ele.attr('ui-valid-id');
    if (!id) {
     id = Math.guid();
     ele.attr('ui-valid-id', id);
    }
    if (id.contains('.')) {
     id = id.replace(/./g, '_');
    }
    var top = offset.top,
      left = offset.left;
    var getTips = function () {
     var _tip = $('#vtip_'   id);
     if (_tip.length) {
      _tip.html(msg).css({
       'display': 'none',
       'top': top   'px',
       'left': left   ele.width()   10   'px'
      });
     } else {
      var html = '<div id="vtip_'   id   '" class="vtip qtip qtip-rounded box-shadow-tips">'  
        '<div class="qtip-content">'   msg   '</div>';
      $(html).css({
       'display': 'none',
       'position': 'absolute',
       'top': top   'px',
       'left': left   ele.width()   10   'px'
      }).appendTo($('body'));
     }
    };
    var bindTipsShow = function () {
     getTips();
     ele.unbind('mouseenter mouseleave').bind('mouseenter', function () {
      var _tip = $('#vtip_'   id);
      if (_tip.is(':hidden')) {
       _tip.show();
      }
     }).bind('mouseleave', function () {
      $('#vtip_'   id).hide();
     });
    };
    bindTipsShow();
   },
   off: function (ele) {
    ele.data('last-tip', '');
    this.filterClass(ele);
    var id = ele.attr('ui-valid-id');
    if (!id) {
     return;
    }
    if (id.contains('.')) {
     id = id.replace(/./g, '_');
    }
    $('#vtip_'   id).remove();
    ele.unbind('mouseenter mouseleave');
   }
  }
 });
 app.factory('uiValidFactory', ['$parse', 'uiTipsFactory', function ($parse, tips) {
  return {
   check: function (val, rules, $scope, defaultTips, extendParam) {
    if (!rules) {
     return {
      flag: true
     };
    }
    var rulesArr = rules.split(' '),
      isBlank = val === null || val === undefined || val === '' || (''   val === '');
    //如果不是必填项 且没有输入值 则清除提示框
    if ($.inArray('r', rulesArr) === -1 && isBlank) {
     return {
      flag: true
     }
    }
    var i = 0, len = rulesArr.length;
    for (; i < len; i  ) {
     var rule = rulesArr[i];
     if (!rule) {
      continue;
     }
     var flag = true;
     if ('r' === rule) {
      //如果是必填项,有值 返回true
      flag = !isBlank;
     } else if (rule.contains(':')) {
      //如果校验规则是 fn:ctrl.certCheck
      flag = this.checkRule(val, rule.split(/:/), $scope, extendParam);
     } else {
      //校验 规则是 int 用正则匹配 数字 邮箱 长度
      var pat = this.pats[rule];
      if (pat instanceof RegExp) {
       if (angular.isString(val)) {
        flag = this.mat(val, pat);
       }
      } else if (angular.isFunction(pat)) {
       flag = pat(val);
      } else {
       flag = false;
      }
     }
     //这是干什么的呢
     if (angular.isString(flag)) {
      return {
       flag: false,
       msg: flag,
       rule: rule
      }
     }
     if (flag === false) {
      var msg = this.getMsg(rule, defaultTips) || this.getMsg('tips.valid');
      console.log(msg);
      return {
       flag: false,
       msg: msg,
       rule: rule
      }
     }
    }
    return {
     flag: true
    }
   },
   checkRule: function (val, ruleArr, $scope, extendParam) {
    //ruleArr fn:certCheck
    var rule = ruleArr[0];
    if (rule === 'fn') {
     fnName = ruleArr[1];//指定被调函数的名字 certCheck
     var fn = $parse(fnName)($scope);
     if (!fn) {
      return true;
     }
     return fn.call($scope, val, extendParam);
    } else {
     return true;
    }
   },
   checkValidForm: function (formName) {
    //只检查必填项
    //使用属性筛选器 获得里面所有的元素
    var formContext = $('form[name="{0}"],[ng-form="{0}"],[data-ng-form="{0}"]'.format(formName)),
      validList = formContext.find('[my-valid]');//validList 不是数组,是伪数组
    if (!validList.length) {
     return;
    }
    var that = this,
      validFlags = [];
    validList.each(function () {
       var ele = $(this),
         val = ele.val(),
         ruleStr = ele.attr('my-valid');
       if (!ruleStr) {
        return true;
       }
       if (angular.isString(val)) {
        val = val.trim();
       }
       var validRules = ruleStr.split(' ');
       if ($.inArray('r', validRules) != -1 && !val) {
        var modelValue = ele.attr('ng-model') || ele.attr('data-ng-model');
        validFlags.push(modelValue);
        tips.on(ele, that.getMsg('r'));
       }
      }
    );
    return validFlags;
   },
   mat: function (val, pat) {
    if (!pat) {
     return;
    }
    return pat.test(val);
   }
   ,
   getMsg: function (rule, tips) {
    tips = tips || '';
    //可以在界面上直接写 tips
    if (tips && tips.contains(':')) {
     return tips;
    }
    var msg = this.msgs[rule];
    if (msg) {
     var params0 = tips.contains(':') ? tips.split(/:/)[0] : '';
     var params1 = '';
     if (rule.startsWith('min') || rule.startsWith('max')) {
      var ruleArr = rule.split(/:/);
      params1 = ruleArr[ruleArr.length - 1];
     }
     return msg.format(params0, params1);
    } else {
    }
   }
   ,
   regPat: function (code, pat, msg) {
    if (this.pat[code]) {
     return;
    }
    this.pats[code] = pat;
    this.msgs[code] = msg;
   }
   ,
   msgs: {
    'r': '必填',
    'int': '{0}必须为整数'
   }
   ,
   pats: {
    'int': /^[- ]?([0-9] )$/
   }
  }
 }
 ])
 ;
 app.directive('myValid', ['$parse', 'uiTipsFactory', 'uiValidFactory', function ($parse, tips, valid) {
  var uiValidAttrIdName = 'ui-valid-id';
  return {
   restrict: 'A',
   require: 'ngModel',
   link: function (scope, el, attrs, ctrl) {
    var validId = el.attr(uiValidAttrIdName);
    if (!validId) {
     validId = Math.guid();
     el.attr(uiValidAttrIdName, validId);
    }
    var getRules = function () {
     return attrs.myValid;
    };
    var lastOldRules;
    var validFn = function (value, oldRules) {
     var sp = '_';
     var rules = getRules();
     var r = valid.check(value, rules, scope, attrs.uiValidTips);
     if (lastOldRules && !oldRules) {
      oldRules = lastOldRules;
     }
     if (r.flag && oldRules) {
      rules = rules ? rules   ' '   oldRules : oldRules;
     }
     if (rules) {
      var arrInner = rules.split(' ');
      var i = 0;
      for (; i < arrInner.length; i  ) {
       var oneRule = arrInner[i];
       if (!oneRule.trim()) {
        continue;
       }
       ctrl.$setValidity(attrs.ngModel   sp   oneRule, r.flag ? true : oneRule != r.rule);
      }
     }
     if (!r.flag) {
      tips.on(el, r.msg);
     } else {
      tips.off(el);
     }
     return r.flag;
    };
    var init = function () {
     var rules = getRules();
     if (!rules) {
      return;
     }
     var parsers = ctrl.$parsers;
     if (parsers && parsers.length > 0) {
      parsers.clean();
     }
     parsers.unshift(function (value) {
      return validFn(value) ? value : undefined;
     });
    };
    scope.$watch(attrs.ngModel, function (newVal, oldVal) {
     if (newVal === oldVal) {
      return;
     }
     if (ctrl.$modelValue != undefined && (ctrl.$invalid || el.hasClass('ng-invalid'))) {
      validFn(ctrl.$modelValue);
     }
    });
    scope.$watch(getRules, function (newRules, oldRules) {
     init();
     lastOldRules = oldRules;
     if (ctrl.$modelValue === undefined || ctrl.$modelValue === null) {
      var needValid = false;
      el.hasClass('ng-invalid');
      var isValNaN = ctrl.$viewValue !== ctrl.$viewValue;
      if (ctrl.$invalid || (ctrl.$viewValue !== undefined && !isValNaN)) {
       needValid = true;
      }
      if (needValid) {
       ctrl.$setViewValue(ctrl.$viewValue);
      }
     } else {
      if (!ctrl.$dirty && attrs.dirtyCheck) {
       console.log('----');
      } else {
       validFn(ctrl.$modelValue, oldRules);
      }
     }
    });
   }
  }
 }]);
</script>
</html>

就像这样 Angular 会根据规则来验证输入部分的$invalid 和 $pristine properties属性从而决定是否显示错误信息.

总结

您可能感兴趣的文章:

  • AngularJS实现表单验证
  • 详解Angular开发中的登陆与身份验证
  • AngularJS使用ngMessages进行表单验证
  • AngularJS实现表单手动验证和表单自动验证
  • Angular2表单自定义验证器的实现
  • angular实现表单验证及提交功能
  • AngularJs验证重复密码的方法(两种)
  • Ionic AngularJS实现登录和注册带验证功能
  • AngularJS身份验证的方法
  • AngularJS手动表单验证
  • Angular简单验证功能示例

Web前端 8

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

格局类

您可能感兴趣的文章:

  • AngularJS中实现用户访问的身份认证和表单验证功能
  • 3个可以改善用户体验的AngularJS指令介绍
  • AngularJS用户选择器指令实例分析
  • AngularJS自定义插件实现网站用户引导功能示例
  • AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
  • Angular.js与Bootstrap相结合实现表格分页代码
  • 总结十个Angular.js由浅入深的面试问题
  • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply
  • Angular.js如何从PHP读取后台数据
  • Angular.js回顾ng-app和ng-model使用技巧

Angular在验证输入或表单时的有效有否是已经提供了一些类,像是 (ng-valid,ng-invalid,ng-pristineandng-dirty).

你可以编辑自己喜欢的CSS . 你可以私有定制化这些类来实现特定的场景应用.  

.ng-valid     { }
.ng-invalid   { }
.ng-pristine   { }
.ng-dirty     { }

/* really specific css rules applied by angular */
.ng-invalid-required     { }
.ng-invalid-minlength     { }
.ng-valid-max-length     { }

使用 ng-class 根据条件添加类

因为我们使用了 Bootstrap, 我们将就使用它们提供的类(has-error). 这样就能围绕我们的form-group获得漂亮的错误信息和颜色.

ng-class 允许我们基于一个表达式添加类. 在这种情况下,我们想要想我们的form-group添加一个 has-error 类,如果输入框的状态是$invalid或者不是pristine的话.

其工作的方式是 ng-class="{ <class-you-want> : <expression to be evaluated > }". 更多的信息,请读一读 Angular ngClass 文档吧.

 

<!-- index.html -->
...

  <!-- NAME -->
  <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
    <label>Name</label>
    <input type="text" name="name" class="form-control" ng-model="user.name" required>
    <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
  </div>

  <!-- USERNAME -->
  <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
    <label>Username</label>
    <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
    <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
    <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
  </div>

  <!-- EMAIL -->
  <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
    <label>Email</label>
    <input type="email" name="email" class="form-control" ng-model="user.email">
    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
  </div>

...

现在我们的表单就有了恰当的Bootstrap错误类.

Web前端 9

只在提交表单后显示错误信息

有时候不想在用户正在输入的时候显示错误信息. 当前错误信息会在用户输入表单时立即显示. 由于Angular很棒的数据绑定特性,这是可以发生的. 因为所有的事务都可以在一瞬间发生改变,这在表单验证时会有副作用.

对于你想要只在表单正要提交之后才显示错误消息的场景, 你就需要对上面的代码做一些小调整.

  •     你要去掉提交按钮上的ng-disabled,因为我们想要用户即使是在表单没有全部验证完的情况下也能点击提交.
  •     你要在表单已经被提交之后添加一个变量. 在你的 submitForm() 函数中, 只要加入 $scope.submitted = true 就行了;. 一旦表单被提交,它就会保存提交值为true的submitted变量.
  •     将错误规则从ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }" 调整为 ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine && submitted }". 这就确保了错误消息只会在表单被提交时被显示出来. 你也许会需要为这个变量调整所有其它的 ng-class 和 ng-show.

现在,只有在submitted变量被设置为true时才会显示错误信息.
 
只有在输入框之外点击时才显示错误消息

只有在输入框之外点击时才显示错误消息(也被叫做失去焦点 blur) 这一需求比在提交时验证要复杂一点. 在失去焦点时验证表单需要一个custom指令. 这是一个可以让你操作DOM的指令.

我们正在写一篇文章专门讨论此话题。同时,还有其他的一些资源讨论了创建custom指令来处理失去焦点的情况:

  •    
  •    
  •    

全部完成

现在一旦我们正确填写了所有的信息,我们的表单提交按钮就能使用了. 一旦我们提交了表单,我们将会见到我们设置的弹出消息.

Web前端 10

用了几行我们就可以:

  •     进行输入框验证
  •     显示表单错误消息
  •     定制样式类
  •     自动禁止和启用表单
  •     定制规则

如你所见,我们使用了Angular内置的表单验证技术来创建一个客户端验证表单.

您可能感兴趣的文章:

  • AngularJS使用ngMessages进行表单验证
  • angular实现表单验证及提交功能
  • AngularJS中实现用户访问的身份认证和表单验证功能
  • 详解AngularJS中的表单验证(推荐)
  • AngularJS手动表单验证
  • AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
  • 强大的 Angular 表单验证功能详细介绍
  • AngularJS 表单验证手机号的实例(非必填)
  • Angular4表单验证代码详解
  • Angular2.js实现表单验证详解
  • AngularJS自定义表单验证功能实例详解
TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:Web前端js完成登记系统的实例详解,输入框实现自