8-Angular的事件和表单

前面的文章说道了click事件,与其类似的mouseover以及mousemove等等。下面看看selected、change、copy等运用在表单的事件吧。

selected

<div ng-controller="Aaa">

    <input type="checkbox" ng-model="aaa" value="{{aaa}}">
    <select>
        <option>11111</option>
        <option ng-selected="aaa">22222</option>
        <option>33333</option>
    </select>

</div>

<script type="text/javascript">
    var m1 = angular.module(‘myApp‘,[]);
    m1.controller(‘Aaa‘,[‘$scope‘,function($scope){}]);
</script>

如果我们希望一个select选中指定的option,只需要设置该option为selected="selected",现在为第二个绑定一个变量aaa,对应了一个单选框的ng-model,但单选框选中时aaa为true,取消选中时为false,这样就能设置option的selected了。

change

<div ng-controller="Aaa">
    <input type="text" ng-change="bbb=‘hello‘" ng-model="bbb">    <p>{{bbb}}</p>
</div>

<script type="text/javascript">
    var m1 = angular.module(‘myApp‘,[]);
    m1.controller(‘Aaa‘,[‘$scope‘,function($scope){}]);
</script>

当输入框的内容发现改变的时候,让bbb变量设为‘hello‘。

copy

<div ng-controller="Aaa">
    <input type="text" value="xiecg" ng-copy="ccc=‘hello‘">
    <p>{{ccc}}</p>
</div>

<script type="text/javascript">
    var m1 = angular.module(‘myApp‘,[]);
    m1.controller(‘Aaa‘,[‘$scope‘,function($scope){}]);
</script>

当我们粘贴内容到输入框的时候,ccc的值变成‘hello‘。

除此之外,还有cut(剪切)、paste(粘贴事件)。

下面看个具体的表单验证的例子:

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input相关指令详解</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<style type="text/css">

.username .ng-valid{background-color:lightgreen;}
      .username .ng-invalid{background-color:lightcoral;}
      .username .ng-pristine{background-color:#fafafa;}
      /*
      .username .ng-dirty{}
      .username .ng-invalid-required{}
      .username .ng-invalid-minlength{}
      .username .ng-valid-max-length{}
      */

</style>
</head>
<body>

<div ng-controller="Aaa">
    <div class="col-md-6">
        <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid,user)" class="form-horizontal" novalidate>
            <div class="form-group  has-feedback">
                <div class="col-md-4">
                    <label for="name">用户名</label>
                </div>
                <div class="col-md-8 username">
                    <input class="form-control" id="name" name="name" type="text" required ng-pattern="/^[a-zA-Z]{0,6}$/" ng-model=‘user.name‘ />
                    <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.name.$dirty && myForm.name.$valid"></span>
                    <span class="glyphicon glyphicon-remove form-control-feedback" ng-show="myForm.name.$dirty && myForm.name.$invalid"></span>
                </div>
            </div>

            <div class="form-group  has-feedback">
                <div class="col-md-4">
                    <label for="url">URL</label>
                </div>
                <div class="col-md-8">
                    <input type="url" id="url" name="url" ng-model="user.url" class="form-control" />
                    <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.url.$dirty && myForm.url.$valid"></span>
                </div>
            </div>
            <div class="form-group  text-center">
                <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" />
            </div>
        </form>
    </div>
    <div class="col-md-12">
        <p>
            用户名:{{user.name}}
            没修改:{{myForm.name.$pristine }}
            修改过:{{myForm.name.$dirty}}
            验证失败:{{myForm.name.$invalid}}
            验证成功:{{myForm.name.$valid}}
            required:{{myForm.name.$error.required}}
        </p>
        <p>
            URL:{{user.url}}
            没修改:{{myForm.url.$pristine }}
            修改过:{{myForm.url.$dirty}}
            验证失败:{{myForm.url.$invalid}}
            验证成功:{{myForm.url.$valid}}
            错误详情:{{myForm.url.$error}}
        </p>
    </div>
</div>

<script type="text/javascript">
    var m1 = angular.module(‘myApp‘,[]);
    m1.controller(‘Aaa‘,[‘$scope‘,‘$interval‘,function($scope,$interval){
        $scope.submitForm = function(isValid,data) {
            //验证表单是否可是提交
            if (isValid) {
                console.log(data);
            }else{
                console.log(‘验证失败‘);
            }
        };
    }]);
</script>
</body>
</html>

首先看看表单部分,使用了novalidate属性禁用了表单默认验证行为,并绑定了ng-submit绑定了submitForm方法。

在用户名的input上设置了required,表示不能为空。ng-pattern是自定义的正则表达式。ng-model是数据(用户填写的数据)。

URL的input也是类似的设置。

看一下在form绑定的submitForm函数,传递了两个参数,myForm.$valid以及user。

myForm是form的name,代表整个表单,myForm.$valid是个布尔值,表示整个表单的元素是否通过验证,user是用户填写的数据,用于提交数据。我们都可以通过controller得到这些信息,然後提交给後端。

myForm代表整个表单,给input附上name值,就可以得到input的验证信息,我们以用户名的input为例。

用户名:{{user.name}}
没修改:{{myForm.name.$pristine }}
修改过:{{myForm.name.$dirty}}
验证失败:{{myForm.name.$invalid}}
验证成功:{{myForm.name.$valid}}
required:{{myForm.name.$error.required}}

这里除了第一个之外,其他都是布尔值。

在用户名的input的同级上有两个span元素,分别是正确和错误的图标。(ng-show用于控制元素的显示和隐藏,後面会详细介绍)

myForm.name.$dirty && myForm.name.$valid 当用户修改input的值了,并且验证成功了,我们给予正确的提示。

myForm.name.$dirty && myForm.name.$invalid 当用户修改input的值了,但是遗憾验证失败了,我们给予失败的提示。

除此之外,angular提供了class为我们做更多样式上的提示。

angular在做验证时,这些属性会及时的添加到元素上,方便定制这些类来实现特定的场景应用。

当我们全部输入正确就可以做ajax提交了。

学习笔记,如有不足,请指正!转载请保留原文链接,谢谢。

最後,微博求粉,谢谢。

时间: 2024-10-26 23:31:21

8-Angular的事件和表单的相关文章

jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div> $("ele").click(function(){ alert('触发指定事件') }) $("#test").click(function(){ $("ele").click() //手动指定触发事件 });   方法二:$ele.click( h

JavaScript基础 submit按钮结合onclick事件 实现表单的提交与验证

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

jQuery-3.事件篇---表单事件

jQuery表单事件之blur与focus事件 在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件 它们之间的本质区别: 是否支持冒泡处理 举个简单的例子 <div> <input type="text" /> </div> 其中input元素可以触发focus()事件 div是input的父元素,当它包含的元素input触发了focus事件时,它就产生了foc

React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑定 * 事件对象: 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息 * 表单事件: 获取表单的值 * 1.监听表单的改变事件 ---onChange * 2.在改变的事件里面获取表单输入的值 ---event * 3.把表单输入的值赋值给username

angular js h5关于表单验证的例子

angular js表单验证 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="angular.min.js"></script> <link rel="stylesheet" href="

鼠标事件和表单事件+好友列表选中效果+侧面菜单下拉效果

通用:onclick 鼠标单击ondblclick 鼠标双击onmouseover 鼠标放上onmouseout 鼠标离开onmousemove 鼠标移动 表单:onchang 表单的值改变onblur 失去焦点onfocus 获得焦点onselect 选中 2.好友列表选中效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

angular $http 与form表单的select--&gt;refine

<!DOCTYPE html> <html ng-app="a2_15"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"

自定义事件-继承表单

以下是 基类 Form1 // 委托.事件是 public 和全局的 public delegate void ButtonClickdHandle(object sender, EventArgs e);//定义委托 public event ButtonClickdHandle UserControlButtonClicked;//定义事件 public void button1_Click(object sender, EventArgs e) {//button1 控件定义为 Publi

VUE - 基础语法(事件、表单)

v-on指令,给元素绑定事件: 为事件绑定简单表达式: <div id="test"> <input v-on:click="counter+=1" type="button" value="点我"/> <p>按钮被点了{{counter}}次</p> </div> <script type="text/javascript"> var