angularJs表单验证问题

来源：互联网发布：网络女主播是做什么的编辑：程序博客网时间：2024/05/28 20:19

<!DOCTYPE html><html ng-app="myApp">    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body ng-controller="myController">        <form name="formName" action="">            <input type="text" name="username" placeholder="请输入用户名" required="required" ng-model="user.username" ng-minlength="6" ng-maxlength="18"/>            <input type="tel" ng-pattern="/^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/" name="tel" placeholder="请输入手机号" required="required" ng-model="user.tel"/>            <input type="password" name="psw" required="required" placeholder="请输入密码" ng-model="user.psw" />            <button type="button" ng-disabled="formName.$invalid" ng-click="getData()">提交</button>        </form>        <p ng-show="formName.username.$error.minlength">用户名长度不能少于6位</p>        <p ng-hide="!formName.username.$error.maxlength">用户名长度不能大于18位</p>        <p ng-show="formName.username.$dirty&&form.username.$invalid">用户名不符合规则</p>        <p ng-show="formName.tel.$error.pattern">你输入的手机号码有误</p>        <script src="js/angular.js"></script>        <script type="text/javascript">            angular.module("myApp",[])            .controller("myController",["$scope",function($scope){            }])        </script>    </body></html>

上面是一个小的demo
通过调试可以看出，表单验证是通过 fromName.inputname.$error.条件名字来验证的。返回的是一个布尔值。

fromName.invalid：如果表单验证没通过，返回true。相对fromName.valid：如果表单验证通过，返回true。
fromName.dirty:如果表单被修改过，返回true相对fromName.pristine:如果表单被修改过，返回true

还有一个问题就是利用ng-repeat写单选框时，必须给外input外部套一个div

<div ng-repeat="item in data">    <input type="radio" name="sex" id="sex" value="{{item.id}}"/>{{item.text}}</div>

0 0