AngularJS入门笔记(2)

    xiaoxiao2025-06-19  6

    AngularJS 入门小记(2)

    AngularJS的ng-model指令拓展

    -验证用户输入

    比如这段代码,可以判断input中是否为合法的邮箱地址

    <form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span> </form>

    -还有对输入的判断,判断是否合法,改变,触屏点击

    <form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'"> Email: <input type="email" name="myAddress" ng-model="myText" required></p> <h1>状态</h1> {{myForm.myAddress.$valid}} {{myForm.myAddress.$dirty}} {{myForm.myAddress.$touched}} </form>

    -ng-model指令基于他们的状态为HTML元素提供了CSS类

    <style> input.ng-invalid { background-color: lightblue; } </style> <body> <form ng-app="" name="myForm"> 输入你的名字: <input name="myAddress" ng-model="text" required> </form> <body>
    转载请注明原文地址: https://ju.6miu.com/read-1300108.html
    最新回复(0)