分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

angularjs中form表单提交验证

发布时间:2023-09-06 01:27责任编辑:郭大石关键词:jsform表单
angular.module("MyApp",["ngMessages"]);
<form name="formMyName" ng-submit="$ctrl.changePassword(formMyName)" ng-cloak novalidate>  <--输入新密码-->  <md-input-container md-no-float> ??  <input name="newPassword" type="password" ng-model="$ctrl.data.newPassword" placeholder="请输入密码" 
      ng-pattern=‘/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*(),.])[\da-zA-Z~!@#$%^&*(),.]{6,}$/‘minlength="6" maxlength="20"required/> ??  <div class="errors" ng-messages="formMyName.newPassword.$error">
    <--formMyName对应form表单name,newPassword对应input输入框name,ng-message验证的是form表单下name为newPassword的input框中ng-pattern、minlength、maxlength、required这些验证是否通过,
    当验证不通过时$error为false就会执行ng-message-exp并显示下面的提示,反之当验证通过时$error为true。--> ??????  <div ng-message-exp=[‘required‘,‘minlength‘,‘maxlength‘,‘pattern‘]> ?????????  您需要输入6-20位密码,且必须包括数字、大写字母、小写字母、非数字字符。 ??????  </div>
    </div
  </md-input-container>

  <--输入确认密码-->
  <md-input-container md-no-float>
    <input name="confirmPassword" type="password" ng-modal="$ctrl.data.confirmPassword" placeholder="请输入确认密码"/>
    <div ng-if="formMyName.$submitted && $ctrl.data.newPassword != $ctrl.data.confirmPassword">
      确认密码必须和新密码一致
    </div>
  <--在这个地方确认密码只需要验证确认输入的密码和新密码是否一致就可以了,不需要再去验证最小、最大长度和是否必填那些,因为如果两次密码一致的话上面那些验证是一定通过的,如果两次密码不一致上面那些验证也就没有意义的,
    然后我们可以看到,这里用的是ng-if进行的判断,但是ng-if不属于表单验证,所以后面我们需要用js再进行验证。我们看ng-if里面的条件,formMyName对应form表单name,$submitted表示的是当点击提交按钮时进行验证。-->
  </md-input-container>

  <md-button type="submit">
    提交
  </md-button>
</form>
angular.module(‘‘).controller(‘‘, [ ???‘$rootScope‘, ‘$mdDialog‘, ???function ($rootScope, $mdDialog) { ???????var data = this.data = { ???????????Password: null, ???????????ConfirmPassword: null ???????};    //修改密码 ???????this.changePassword = function (changePasswordForm) {
    //验证输入内容有没有通过表单验证
    //验证确认密码与新密码是否一致
???????????if (changePasswordForm.$invalid || data.Password != data.ConfirmPassword) { ???????????????return ???????????} ???????????$mdDialog.hide(data.Password); ???????}; ???}]);

angularjs中form表单提交验证

原文地址:http://www.cnblogs.com/ncloud/p/7894514.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved