angularJs表单验证问题

最新推荐文章于 2020-12-23 03:04:26 发布

IT_caainiao

最新推荐文章于 2020-12-23 03:04:26 发布

阅读量324

点赞数

文章标签： angularjs 表单

本文链接：https://blog.csdn.net/IT_caainiao/article/details/52949220

版权

<!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>

IT_caainiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJs表单验证问题

<!DOCTYPE html><html ng-app="myApp"> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-controller="myController"> <form name="formName" action="">
复制链接

扫一扫