大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

使用angular怎么监听input输入

这期内容当中小编将会给大家带来有关使用angular怎么监听input输入,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

成都创新互联公司是一家专注于网站建设、网站设计与策划设计,东平网站建设哪家好?成都创新互联公司做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:东平等地区。东平做网站价格咨询:028-86922220

jsp:



 
  
  {{username_error}}
 

这里需要添加ng-app以及ng-controller来规定一个angularApp的范围,再在input标签中添加ng-model属性,让angularjs根据这个属性来监听输入,根据输入把用户提示放到{{username_error}}中

js:

var usernameValid=false;
var registApp =angular.module('regist_app',[]);
registApp.controller('regist_control',function($scope){
 $scope.username="";
 $scope.username_error="";
 var phonePattern=/\D+/;
 /*验证号码输入*/
 $scope.$watch('username',function(newValue,oldValue){
  if(newValue!=oldValue){
   if(newValue==""){
    $scope.username_error="号码不能为空";
    usernameValid=false;
   }
   else if(phonePattern.test(newValue)){
    $scope.username_error='只能输入数字';
    usernameValid=false;
   }
   else if(newValue.length!=11){
    $scope.username_error='格式不正确,请输入11位号码';
    usernameValid=false;
   }else if(newValue.length==11){
    $scope.username_error="";
    usernameValid=true;
   }
  }
 });
}

scope.scope.watch(参数,function),这个参数就是input的ng-model的值。function的第一个参数是新的值,第二个参数是旧的值,可以判断newValue来给用户相应的提示,结合pattern来判断用户输入是否合法。一个Controller中可以有多个scope.scope.watch(),这里我只贴出一个input的验证方法,其他的都差不多。

usernameValid这个值用来记录当前的input输入是否合法,用于表单提交时根据usernameValid来判断。

上述就是小编为大家分享的使用angular怎么监听input输入了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


网站标题:使用angular怎么监听input输入
当前网址:http://dzwzjz.com/article/pcpjps.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP