angular实现input输入监听的示例

最近做用户注册登录时，需要监控用户的输入以此来给用户提示，用到了angular的$watch功能，以下是例子：

jsp：

<form class="register ng-scope" ng-app="regist_app" onsubmit="registSumbitValid()" ng-controller="regist_control">

 <div class="item">
  <input id="username" name="username" placeholder="请填写11位手机号码" class="input-item" ng-model="username" >
  <span class="warnning">{{username_error}}</span>
 </div>
</form>

这里需要添加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输入监听的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS实现一次监听多个值发生的变化

    一.$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name} . listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参

  • Angular 输入框实现自定义验证功能

    Angular 输入框实现自定义验证功能

    此插件使用angular.js.JQuery实现.(jQuery的引入需在angular 之前) 用户可以 在输入框输入数据后验证 必填项.整数型.浮点型验证. 如果在form 里面的输入框验证,可以点击 提交按钮后,实现 必填项验证. 效果图如下: (1)验证未通过时,背景标红等样式为 input.ng-invalid, select.ng-invalid { background-color: #ee82ee !important; border: 1px solid #CCC; } .qt

  • Angular.js组件之input mask对input输入进行格式化详解

    前言 最近因为项目的需要,经常有一些对input输入进行格式化的需求,以前做的时候在js中写指令进行处理,但是这样又要在js或者在java代码中将请求的数据进行还原,很是麻烦,于是在网上看到了jquery的inputmask组件,觉得很好用,在项目中写出指令,用起来很方便. 方法如下: 在项目中引入jquery和jquery-inputmask,然后在项目中写指令,如下: define(['./module'], function (directives) { 'use strict'; dir

  • Angular移动端页面input无法输入的解决方法

    解决方法: 用angular写手机页面,有时候会发现input输入框点击了却不能输入,或者长按才能输入,可能是因为input绑定了ng-click导致,可去掉ng-click,将ng-click绑定的方法改用ng-focus就好了 以上这篇Angular移动端页面input无法输入的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • angular实现input输入监听的示例

    最近做用户注册登录时,需要监控用户的输入以此来给用户提示,用到了angular的$watch功能,以下是例子: jsp: <form class="register ng-scope" ng-app="regist_app" onsubmit="registSumbitValid()" ng-controller="regist_control"> <div class="item">

  • Angular中使用$watch监听object属性值的变化(详解)

    Angular中使用$watch监听object属性值的变化(详解)

    Angular中的$watch可以监听属性值的变化,然后并做出相应处理. 常见用法: $scope.$watch("person", function(n, o){ //todo something... }) 但是对于一个对象中的某个属性值变化时,$watch似乎不管用了. 示例代码: <body> <div ng-controller="mainCtrl"> <input id="myText" type=&qu

  • Pygame实现监听鼠标示例详解

    Pygame实现监听鼠标示例详解

    目录 初始化参数 鼠标移动 鼠标点击位置 输出鼠标位置及其对用的按钮 完整代码  pygame如何捕捉鼠标的活动 初始化参数 import pygame, sys from pygame.locals import * def print_text(font, x, y, text, color=(0, 0, 0)): """打印字体函数""" img_text = font.render(text, True, color) screen.bl

  • Python简单实现socket信息发送与监听功能示例

    本文实例讲述了Python简单实现socket信息发送与监听功能.分享给大家供大家参考,具体如下: 最近在研究boost C++库,用于工作中处理大规模高并发TCP连接数据响应,想测试,也可以用boost::asio库来写,但不利于测试代码的灵活修改. 于是就研究了一下python怎么做.学习过程中看到网上给出的代码示例虽然很基础易懂,对于python零基础的人来说,完全可以稍微复杂些,配上一些注释,就能更多掌握一些socket和python的基本语法知识. 于是根据我的使用需要,修改pytho

  • Java可以如何实现文件变动的监听的示例

    应用中使用logback作为日志输出组件的话,大部分会去配置 `logback.xml` 这个文件,而且生产环境下,直接去修改logback.xml文件中的日志级别,不用重启应用就可以生效 那么,这个功能是怎么实现的呢? 应用中使用logback作为日志输出组件的话,大部分会去配置 logback.xml 这个文件,而且生产环境下,直接去修改logback.xml文件中的日志级别,不用重启应用就可以生效 那么,这个功能是怎么实现的呢? I. 问题描述及分析 针对上面的这个问题,首先抛出一个实际的

  • Android电池电量监听的示例代码

    Android电池电量监听的示例代码

    监听电池状态只需要接收Intent.ACTION_BATTERY_CHANGED的广播即可,当电池状态发生变化时会发出广播. 1.运行状态如下图: 1.充电中的状态 2.未充电时的状态 2.实现代码如下,各个状态通过名字就很容易知道意思,BatteryManager类中定义了电池状态. public class MainActivity extends Activity { private static final String TAG = "MainActivity"; privat

  • 从零开始学习Node.js系列教程五：服务器监听方法示例

    从零开始学习Node.js系列教程五：服务器监听方法示例

    本文实例讲述了Node.js服务器监听方法.分享给大家供大家参考,具体如下: httpsnifferInvoke.js var http = require('http'); var sniffer = require('./httpsniffer'); var server = http.createServer(function(req, res){ res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello, Wor

  • Android开发之CheckBox的简单使用与监听功能示例

    本文实例讲述了Android开发之CheckBox的简单使用与监听功能.分享给大家供大家参考,具体如下: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_

  • android短信监听工具(示例代码)

    在学习本实例之前,读者请先了解一下android四大组件中的"广播接收者"的基本概念和使用. 由于是"监听程序",所以就不需要建立Activity.这样也算是一种"遮掩"吧.使用BroadcastReceiver,就能达到这"不可告人"的目的.呵呵.当然,使用服务来开发此类应用,更加合适.这里就不再深入讨论"服务"了.本实例仅供学习参考,请勿非法用途. 复制代码 代码如下: package cn.itcas

  • Android编程双重单选对话框布局实现与事件监听方法示例

    Android编程双重单选对话框布局实现与事件监听方法示例

    本文实例讲述了Android编程双重单选对话框布局实现与事件监听方法.分享给大家供大家参考,具体如下: 首先是自定义XML布局代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_pare

随机推荐