zoukankan      html  css  js  c++  java
  • Angularjs 通过directive实现验证两次输入是否一致的功能

    实现效果:

     1> 当输入确认密码时验证:  

    2> 当输入密码时验证:

      

    实现步骤:

    1.页面代码:  

    <input class="form-control" type="password" id="password" name="password"
                                                       ng-model="user.password"
                                                       match-check="confrimPassword|confrimPassword">
    
    input class="form-control" type="password" id="confrimPassword"
                                                       name="confrimPassword"
                                                       ng-model="user.confrimPassword"
                                                       match-check="password|confrimPassword" onpaste="return false">
                                                <span class=" error"
                                                      ng-show="!form.password.$pristine && !form.confrimPassword.$pristine && form.confrimPassword.$error.match">This does not match the 'Password' entered above.  Please re-enter your password.</span>
    View Code

    2.自定义验证指令

    "use strict";
    
    /**
     * Created by jerry_yang on 2015/11/27.
     * user defined match check directive
     */
    angular.module('bet.match', [])
        .directive('matchCheck', matchCheck);
    
    function matchCheck() {
        return {
            require: 'ngModel',
            link: function (scope, elem, attrs, ctrl) {
                var matchCheck = attrs.matchCheck;
                var param = matchCheck.split('|');
                var inputCtr = '#' + param[0];
                elem.bind(inputCtr).on('keyup', function () {
                    scope.$apply(function () {
                        var v = elem.val() === $(inputCtr).val();
                        scope.form[param[1]].$setValidity('match', v);
                    });
                });
            }
        }
    }
    View Code
  • 相关阅读:
    VS2010程序打包
    Extjs布局
    Extjs4.x完美treepanel checkbox无限级选中与取消
    extjs 4.2 日期控件 选择时分秒功能
    extjs4.0下的日期控件的星期显示为y的解决办法
    linux下mysql 配置
    坐标轴笔记
    cpp 内嵌函数(lambda,struct)
    ue4 笔记
    ue4 蓝图方法备份
  • 原文地址:https://www.cnblogs.com/ywblog/p/5039823.html
Copyright © 2011-2022 走看看