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

Bertha 。 2022-06-12 11:25 244阅读 0赞

一、表单定义

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

[AngularJs 自定义表单验证][AngularJs]

[AngularJs表单验证实例1][AngularJs_1]

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

[AngularJs]: http://blog.csdn.net/u011127019/article/details/75248125
[AngularJs_1]: http://blog.csdn.net/u011127019/article/details/51488723
[AngularJS_event.stopPropagation]: http://blog.csdn.net/u011127019/article/details/54970308