javascript - AngularJs表单验证自定义指令为什么不起作用呢？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

刚开始学习AngularJs，尝试写表单验证，自己自定义一个验证确认密码的指令怎么不起作用？

代码如下：

angular.module('myApp',[])
   .controller('SignUpController',function($scope){
     $scope.userdata = {};
     $scope.submitForm = function() {
           console.log($scope.userdata);
          if($scope.signUpForm.$invalid){
            alert("请填写完信息");
          }else {
             alert("注册成功");
         }
      };
   })
   .directive('confirm-pwd',function(){
     console.log($scope.userdata.password1);
       return {
           require:'ngModel',
           restrict:'AE',//匹配模式 A属性
           scope:{orgTxt: '=confirmPwd'},
           link: function(sco,ele,att,con) {
               con.validators.confirmPwd = function(v) {
                   return  v === sco.orgTxt;
               };
               sco.watch('orgTxt',function() {
                   con.validate();
               });
           }
       };
   });

html部分代码如下：


 
    名称
    
      

        用户名长度应在2到4个字符之间
  


    密码
    
 

        密码长度应该在4-12位之间



    
合法：{{signUpForm.password1.$invalid}}
    {{userdata.password1}}
    确认密码
    
    两次输入密码不一致

巴扎黑

全部回复(2)

阿神2017-04-11 11:23:25 2楼

1.把$加上

link: function(sco, ele, att, con) {
                        console.log(con);
                        con.$validators.confirmPwd = function(v) {
                            return v === sco.orgTxt;
                        };
                        sco.$watch('orgTxt', function() {
                            con.$validate();
                        });

2..directive('confirmPwd'....定义用驼峰，调用用连字符confirm-pwd="userdata.password"
3.不知道ng-app和ng-controller加了没因为没贴。
最后合法的逻辑好像有点问题。密码不一致合法会提示true，一致提示false,其他功能正常。

赞 +0

添加回复

大家讲道理2017-04-11 11:23:25 1楼

最终正确的是：

angular.module('myApp',[])

   .controller('SignUpController',function($scope){
     $scope.userdata = {};
     $scope.submitForm = function() {
           console.log($scope.userdata);
          if($scope.signUpForm.$invalid){
            alert("请填写完信息");
          }else {
             alert("注册成功");
         }
      };
   })
   .directive('confirmPwd',function(){ //指令定义用驼峰法
       return {
           require:'ngModel',
           restrict:'AE',//匹配模式 A属性
           scope:{orgTxt: '=confirmPwd'},
           link: function(sco,ele,att,con) {
               con.$validators.confirmPwd = function(v) {
                   return  v === sco.orgTxt;
               };
               sco.$watch('orgTxt',function() {
                   con.$validate();
               });
           }
       };
   });

      <body ng-app="myApp" ng-controller="SignUpController">
   <form name="signUpForm" ng-submit="submitForm()" novalidate>
    <p class="form-group">
        <label>名称</label>
        <input type="text"
               class="form-control"
               autofocus="autofocus"
               name = "username"
               ng-model = "userdata.username"
               ng-minlength = "2"
               ng-maxlength = "6"
               required
               id="name1">
       <p ng-if="(signUpForm.username.$error.minlength ||
           signUpForm.username.$error.maxlength)&& signUpForm.username.$dirty">
            用户名长度应在2到4个字符之间</p>
    </p>

    <p class="form-group">
        <label>密码</label>
        <input type="password"
               class="form-control"
               name="password"
               ng-model="userdata.password"
               ng-minlength="4"
               ng-maxlength="12"
             required>
   <p ng-if="(signUpForm.password.$error.minlength||
                signUpForm.passsword.$error.maxlength)&&
                signUpForm.password.$dirty">
            密码长度应该在4-12位之间</p>

    </p>
    <p class="form-group">
        <label>确认密码</label>
        <input type="password"
               class="form-control"
               name="password1"
               ng-model="userdata.password1"
               confirm-pwd="userdata.password"
               required>
        <p ng-if="signUpForm.password1.$error.confirmPwd &&
             signUpForm.password1.$dirty">两次输入密码不一致</p>
    </p>
    <button  type="submit" class="btn" id="valite">验证</button>
  </form>
  <script src="../lib/angular-1.6.1/angular.min.js"></script>
  <script src="../js/HelloAngular.js"></script>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>