AngularJs表单校验功能实例代码


Posted in Javascript onFebruary 09, 2017

废话不多说了,具体代码如下所示:

<!DOCTYPE html>
<html ng-app="angularFormCheckModule">
 <head>
  <meta charset="UTF-8">
  <title>angular表单校验</title>
  <link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" />
  <style>
   span{
    color: red;
   }
  </style>
 </head>
 <body ng-controller="angularFormCheckCtrl">
  <!--使用angular校验,每一个校验的项都必须用ng-model,不然无法执行在脏检查,就无法校验-->
  <form name="angularForm" novalidate method="post">
   <table class="table table-bordered">
    <tr>
     <td>用户名</td>
     <td>
      <input type="number" required="required" ng-model="user.userName" name="userName" ng-minlength="6"/>
      <!--angularForm.userName.$dirty检查是否是第一次输入!网上有很多种方法校验是否是第一次输入-->
      <span class="warning" ng-show="angularForm.userName.$dirty && angularForm.userName.$error.required">*</span>
      <span class="warning" ng-show="angularForm.userName.$error.number">只能输入数字</span>
      <span class="warning" ng-show="angularForm.userName.$error.minlength">最少为6位数</span>
     </td>
    </tr>
    <tr>
     <td>密码</td>
     <td>
      <!--这里的id,一定要等于compare-pwd的值,因为指令里面是根据Id取值的-->
      <input type="password" required="required" ng-minlength="6" name="pwd" ng-model="user.password" id="pwd"/>
      <!--angularForm.pwd.$pristine首次输入,不太清楚的就自己运行,去掉条件一个一个的试!-->
      <span class="warning" ng-show="!angularForm.pwd.$pristine && angularForm.pwd.$error.required">*</span>
      <span class="warning" ng-show="angularForm.pwd.$error.minlength">最少为6位数</span>
     </td>
    </tr>
    <tr>
     <td>确认密码</td>
     <td>
      <!--这里compare-pwd的值,要等于被比较的对象的name属性值,即第一个密码框的name值-->
      <input type="password" required="required" name="pwd2" compare-pwd="pwd" ng-model="pwd2"/>
      <span class="warning" ng-show="angularForm.pwd2.$error.required">*</span>
      <!--注意这里的pwdmatch,是指令里面设置的-->
      <span class="warning" ng-show="angularForm.pwd2.$error.pwdmatch">X</span>
      <span class="warning" ng-show="angularForm.pwd2.$valid" style="color: green;">OK</span>
      <!--
       其实这种事最简单的校验方式,不用写指令!!!
       <span ng-show="user.password !=pwd2">两次密码输入不一致</span>       
      -->
     </td>
    </tr>
    <tr>
     <td>手机</td>
     <td>
      <!--pattern正则表达式校验输入内容-->
      <input type="number" required="required" name="phone" ng-model="user.phone" ng-pattern="/^1[3|4|5|7|8]\d{9}$/">
      <span class="warning" ng-show="angularForm.phone.$error.required">*</span>
      <span class="warning" ng-show="angularForm.phone.$error.number">只能输入数字</span>
      <span class="warning" ng-show="angularForm.phone.$error.pattern">手机格式不正确</span>
     </td>
    </tr>
    <tr>
     <td>邮箱</td>
     <td>
      <input type="email" required="required" ng-model="user.email" name="email"/>
      <span class="warning" ng-show="angularForm.email.$error.required">*</span>
      <span class="warning" ng-show="angularForm.email.$error.email">邮箱格式不正确</span>
     </td>
    </tr>
    <tr>
     <td>URL</td>
     <td>
      <input type="url" required="required" ng-model="user.url" name="url"/>
      <span class="warning" ng-show="angularForm.url.$error.required">*</span>
      <span class="warning" ng-show="angularForm.url.$error.url">URL格式不正确</span>
     </td>
    </tr>
    <tr>
     <td>(注:*为必填)</td>
     <td>
      <input type="submit" value="提交" ng-disabled="!angularForm.$valid" class="btn btn-success"/>
     </td>
    </tr>
   </table>
  </form>
 </body>
 <script type="text/javascript" src="../js/jquery.min.js" ></script>
 <script type="text/javascript" src="../js/angular-1.2.22.js" ></script>
 <script type="text/javascript" src="../js/angularFormCheck.js" ></script>
</html>

js代码(除了指令意外,没什么可用的,写出来只是为了,说一下mvc模式而已!)

var app = angular.module("angularFormCheckModule",[]);
/*这里使用MVC的模式(用来举例说明MVC而已)*/
app.controller("angularFormCheckCtrl",function($scope,angularFormCheckFactory){//function里的参数写你在函数里需要用到的
 $scope.testVar = angularFormCheckFactory.getTest();//这里就能取到$scope.testVar的值为---"练习angular表单校验";
 $scope.user = {};
 $scope.test= "sss";
});
/*自己可以去看factory、service、providers的区别(http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider)*/
/*用 Factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来。*/
app.factory('angularFormCheckFactory',function(){
 //这里写自己的业务逻辑
 var test = "练习angular表单校验";
 var service = {};//自定义一个对象
 service.getTest = function(){//给对象添加方法
  return test;
 }
 return service;//返回自定义的service对象!!!
});
/*自定义指令--比较两个密码是否相等.angular的指令是驼峰的形式(这里是comparePwd页面就是compare-pwd)*/
app.directive('comparePwd',function(){
 /*angular 自定义指令,可上网自行查找*/
 return{
  require : 'ngModel',
  /*scope表示作用域,elem表示使用这个指令的元素对象(这里指第二个密码框),attrs。。。ctrl。。。*/
  link : function(scope,elem,attrs,ctrl){
   /*写自己的业务逻辑*/
   //注意这样取值的话,第一密码框的Id值必须要设置且必须与第二个密码框的compare-pwd属性的值相同
   var firstPwdIdObj = "#" + attrs.comparePwd;
   $(elem).add(firstPwdIdObj).on('keyup',function(){
    /*手动执行脏检查*/
    scope.$apply(function(){
     //$(firstPwdIdObj).val()表示第一个密码框的值。elem.val()表示第二个密码框的值
     var flag = elem.val() === $(firstPwdIdObj).val();
     //alert(flag+",--"+elem.val()+",--"+$(firstPwdIdObj).val());
     ctrl.$setValidity("pwdmatch",flag);//flag,表示是否相等。pwdmatch用于$error时的标识符,注意看页面,$setValidity是require中ngModel的方法!
    });
   });
  }
 }
});

下面看一段代码关于AngularJs获取焦点与失去焦点时的表单验证

<!DOCTYPE html> 
<html ng-app="formExample"> 
<head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <script src="../js/angular.js"></script> 
  <script> 
    angular.module('formExample', []) 
        .controller('FormController', ['$scope', function($scope) 
        { 
          $scope.userType = 'guest'; 
          $scope.change = false; 
        }]); 
  </script> 
</head> 
<body> 
<form name="myForm" ng-controller="FormController"> 
  userType: <input name="input" ng-model="userType" ng-blur="change=true" ng-focus="change=false" required> 
  <span class="error" ng-show="myForm.input.$error.required && change">必填项</span><br> 
</form> 
</body> 
</html>

以上所述是小编给大家介绍的AngularJs表单校验功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
js实现3D照片墙效果
Oct 28 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
React配置子路由的实现
Jun 03 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 #Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 #Javascript
简单谈谈Javascript函数中的arguments
Feb 09 #Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 #Javascript
微信小程序之picker日期和时间选择器
Feb 09 #Javascript
BootStrap 弹出层代码
Feb 09 #Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 #Javascript
You might like
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
js opener的使用详解
2014/01/11 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python self,cls,decorator的理解
2009/07/13 Python
Python字符串详细介绍
2015/05/09 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
EJB面试题
2015/07/28 面试题
公益活动邀请函
2014/02/05 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
Django操作cookie的实现
2021/05/26 Python
Pandas-DataFrame知识点汇总
2022/03/16 Python