Angularjs 表单验证3-密码、确认密码处理

一、表单定义

    <form class="form form-horizontal" name="myForm" novalidate>
        <div class="form-group">
            <label class="col-md-2 control-label"><span style="color:red">*</span>会员编号:</label>
            <label class="col-md-1 control-label">@AccountHelper.Code_Above</label>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">
                <span class="text-danger">*</span> 旧登录密码
            </label>
            <div class="col-md-4">
                <input class="form-control" type="password" ng-model="entity.OldPwd" name="OldPwd" placeholder="请输入旧登录密码"
                        required />
                <small class="text-danger" ng-show="myForm.OldPwd.$dirty && myForm.OldPwd.$invalid">
                    <span ng-show="myForm.OldPwd.$error.required">密码是必须的</span>
                </small>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">
                <span class="text-danger">*</span> 新登录密码
            </label>
            <div class="col-md-4">
                <input class="form-control" type="password" ng-model="entity.NewPwd" name="NewPwd" placeholder="请输入登录密码"
                        required />
                <small class="text-danger" ng-show="myForm.NewPwd.$dirty && myForm.NewPwd.$invalid">
                    <span ng-show="myForm.NewPwd.$error.required">密码是必须的</span>
                </small>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">
                <span class="text-danger">*</span> 确认密码
            </label>
            <div class="col-md-4">
                <input class="form-control" type="password"
                        ng-model="entity.LoginPwdC" 
                        name="LoginPwdC" placeholder="请输入再次登录密码"
                        required />
                <small class="text-danger" ng-show="myForm.LoginPwdC.$dirty && myForm.LoginPwdC.$invalid">
                    <span ng-show="myForm.LoginPwdC.$error.required">密码是必须的</span>
                </small>
                <small class="text-danger" ng-show="myForm.LoginPwdC.$dirty&&entity.LoginPwdC!=entity.NewPwd">两次输入的密码不一致</small>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-2"></div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary" ng-click="save()" 
                        ng-disabled="myForm.$invalid||entity.LoginPwdC!=entity.NewPwd">保存</button>
            </div>
        </div>

    </form>


二、特别说明:

确认密码使用的是$scope的属性

<small class="text-danger" ng-show="myForm.LoginPwdC.$dirty&&entity.LoginPwdC!=entity.NewPwd">两次输入的密码不一致</small>
   <button type="submit" class="btn btn-primary" ng-click="save()" 
                        ng-disabled="myForm.$invalid||entity.LoginPwdC!=entity.NewPwd">保存</button>

更多:

AngularJs 自定义表单验证

AngularJs表单验证实例1

AngularJS阻止事件冒泡$event.stopPropagation()

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...