angularjs表单验证,包括密码长度及两次密码输入是否一致

最新推荐文章于 2022-09-24 00:59:12 发布

yhan219

最新推荐文章于 2022-09-24 00:59:12 发布

阅读量500

点赞数 1

文章标签： javascript ViewUI

用户输入正确的邮箱，密码后才能点击登陆按钮。
复制代码到html可直接运行：
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>register</title>
<link rel="stylesheet"
    href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('registerCtrl', function($scope) {

    });
</script>
</head>
<body onload="document.getElementById('email').focus()">
    <div class="col-sm-6 col-sm-offset-3" ng-app="myApp"
        ng-controller="registerCtrl">
        <h1>用户注册</h1>
        <form name="registerForm" novalidate>
            <div id="email-group">
                <label for="email">E-mail:</label> <input type="email"
                    class="form-control" ng-model="email" name="email" id="email"
                    placeholder="请输入电子邮箱..." required>
                <p>
                    <span style="color: red" ng-show=" registerForm.email.$invalid">
                        <span ng-show="registerForm.email.$error.required">*请输入邮箱</span> <span
                        ng-show="registerForm.email.$error.email">*请输入正确的email地址</span>
                    </span>
                </p>
            </div>

            <div id="name-group">
                <label for="name">昵称：</label> <input type="text"
                    class="form-control" ng-model="name" name="name" id="name"
                    placeholder="请输入昵称..." required>
                <p>
                    <span style="color: red" ng-show="registerForm.name.$invalid">
                        <span ng-show="registerForm.name.$error.required">*请输入姓名</span>
                    </span>
                </p>
            </div>

            <div id="password-group">
                <label for="password">密码：</label> <input type="password"
                    class="form-control" ng-model="password" ng-minlength="6"
                    ng-maxlength="20" name="password" id="password"
                    placeholder="请输入密码..." required>
                <p>
                    <span style="color: red" ng-show="registerForm.password.$invalid">
                        <span ng-show="registerForm.password.$error.minlength">*密码长度不小于6</span>
                        <span ng-show="registerForm.password.$error.maxlength">*密码长度不超过20</span>
                    </span>
                </p>
            </div>

            <div id="passwordagaingroup">
                <label for="passwordagain">再输入一遍密码：</label> <input type="password"
                    class="form-control" ng-model="passwordagain" name="passwordagain"
                    id="passwordagain" placeholder="请再输一遍密码..." required>
                <p>
                    <span style="color: red" ng-show="registerForm.password.$valid">
                        <span ng-show="passwordagain!=password">*两次密码输入不一致</span>
                    </span>
                </p>
            </div>

            <button type="submit" class="btn btn-success"
                ng-disabled="registerForm.email.$invalid || registerForm.name.$invalid || registerForm.password.$invalid || password != passwordagain">
                提交<span class="fa fa-arrow-right"></span>
            </button>
        </form>
    </div>


</body>
</html>

运行结果如下:
这里写图片描述

yhan219

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
angularjs表单验证,包括密码长度及两次密码输入是否一致

用户输入正确的邮箱，密码后才能点击登陆按钮。复制代码到html可直接运行：代码如下:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;register&lt;/title&gt;&lt;link rel="stylesheet&qu
复制链接

扫一扫