AngularJs表单验证的例子

来源：互联网发布：九块邮官网淘宝编辑：程序博客网时间：2024/06/04 18:00
宝宝不说话，静静的发代码。。。
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>表单验证例子</title>    <script src="angular.js"></script>    <style>        #content1{padding:16px;}        .notice{            color: greenyellow;        }    </style>    <script>        var app=angular.module("formCheckDemo",[]);        app.controller("formCheckCtrl",function($scope){            $scope.myForm={};        });    </script></head><body ng-app="formCheckDemo" ng-controller="formCheckCtrl">    <form name="myForm" ng-submit="PostForm()">        <ul>            <!--普通方法验证用户名，必填，8-18位-->            <li>                <!--加入required表示必填项，ng-maxlength,ng-minlength用来做长度限制-->                <label>用户名：</label>                <input type="text" ng-model="UserName" name="UserName" ng-maxlength="18" ng-minlength="8" required>                <!--显示与不显示的标记位(ng-show)-->                <!--用户输入后删了($dirty)或者用户输入不合法($invalid)时显示-->                <b class="notice" ng-show="myForm.UserName.$dirty&&myForm.UserName.$invalid">                    <!--触发为必填项时才显示-->                    <span ng-show="myForm.UserName.$error.required">请输入用户名，</span>                    <span>请输入8-18位之间的用户名</span>                </b>            </li>            <!--用正则表达式验证用户名，必填，8-18位(ng-pattern)-->            <li>                <label>用户名：</label>                <input type="text" ng-model="UserName1" name="UserName1" ng-pattern="/^\w{8,18}$/"/>                <span class="notice" ng-show="myForm.UserName1.$dirty&&myForm.UserName1.$invalid">                    <span>请输入8-18位之间的用户名</span>                </span>            </li>            <!--正则表达式验证(ng-pattern)-->            <li>                <label>编号：</label>                <input type="text" ng-model="UserIndex" name="UserIndex" ng-pattern="/^\d+$/"/>                <span style="color: palevioletred;" ng-show="myForm.UserIndex.$dirty&&myForm.UserIndex.$invalid">                    请输入您的数字编号                </span>            </li>            <!--邮箱地址验证(ng-pattern),不加点可以，加中文不行-->            <li>                <label>邮箱地址:</label>                <input type="text" ng-model="Email" name="Email" ng-pattern="/^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z0-9]+$/"/>                <span style="color: coral" ng-show="myForm.Email.$dirty&&myForm.Email.$invalid">                    请输入正确的邮箱地址                </span>            </li>            <!--angularJs中默认的用来验证表单邮箱地址的写法，但是不完善，不加点或者加中文在末尾也是可以的-->            <li>                <label>邮箱地址：</label>                <input type="email" ng-model="Email1" name="Email1" required>                <span style="color: coral;" ng-show="myForm.Email1.$dirty&&myForm.Email1.$invalid">                    <span ng-show="myForm.Email1.$error.required">请输入邮箱地址</span>                    <span ng-show="myForm.Email1.$error.email">请输入正确的邮箱地址</span>                </span>            </li>            <li>                <!--(ng-disabled)判断表单是否完成验证，完成了提交按钮才可用-->                <input ng-disabled="myForm.$invalid" type="submit" value="提交">            </li>        </ul>    </form></body></html>
0 0