angularjs的表单验证

废话：angular的热度在减小，但是老项目依旧是angular的，就是不能丢，得会

干活直接上代码　　<!DOCTYPE html>

<html>
<head><!-- CSS --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /><style>body     { padding-top:30px; }button {background-color: #4CAF50;border: none;color: white;padding: 10px 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;border-radius: 5px;}button:hover {background-color: rgb(113, 173, 115);}button:focus {background: rgb(156, 207, 156);outline: none;}button[disabled] {background: rgb(116, 119, 116)}</style><!-- JS --><script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script><script>var validationApp = angular.module('validationApp', []);validationApp.controller('mainController', function($scope) {$scope.submitForm = function(isValid) {if (isValid) {$('URL'，data，function(result){　　　　　　　　　　　　　　　　....　　　　　　　　　　　　})　　　　　　　　　　　　return false}};});</script>
</head>
<body ng-app="validationApp" ng-controller="mainController">
<div class="container"><div class="page-header"><h1>AngularJS Form Validation</h1></div><form name="userForm"  novalidate><!-- NAME --><div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid}"><label>Name*</label><input type="text" name="name" class="form-control" ng-model="Sname" ng-pattern="/ab{2,}/" required><p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">要的是abb</p></div><!-- USERNAME --><div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }"><label>Username</label><input type="text" name="username" class="form-control" ng-model="Susername" ng-minlength="3" ng-maxlength="8" required><!-- <input type="text" name="username" class="form-control" ng-model="user.username" ng-pattern="/^[a-zA-Z0-9]|[._]/" required> --><p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p><p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p><!-- <p ng-show="userForm.username.$error.pattern" class="help-block">数字，字母 或者 ._  </p> --></div><!-- EMAIL --><div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }"><label>Email</label><input type="email" name="email" class="form-control" ng-model="Demail" required><p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p></div><button type="button" class="btn btn-primary" ng-disabled="userForm.$invalid" ng-click="submitForm(userForm.$valid)">Submit</button>      </form>    </div>  </body> </html>

　　注意：这里是表单提交如果上述红色部分不写或者是 type=“submit“ 在提交页面的时候，我们需要的ajax的效果没办法展示，会直接刷新。

　　　　　　处理用 button的类型，也可以在 ajax 提交的代码中最后 return false

对于angularjs 的解释：

　　ng 指令绑定表单，上面的蓝色部分都是必不可少的;

　　novalidate ,禁止使用表单的默认提交，采用我们ajax的提交方式userForm 必需的表单name 后面要绑定到这个form name 属性

　  ng-pattern="/ab{2,}/" 可以单独为 input 的表单做正则验证，如果不正确就会触发下面的ng-show

　  ng-show="userForm.name.$invalid && !userForm.name.$pristine" 错误信息的展示条件 

　　<input type="text" name="name" class="form-control" ng-model="Sname" ng-pattern="/ab{2,}/" required>

   <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">要的是abb</p>ng 是通过name 属性关联起来的，input 里面的name 和对应表单里面的格式验证 name 要一致；name="name" 必须的input 的那么属性 　　 ng-model="Sname" 必须要的model 不然绑定不到 　，可以不和name的名字一致　所有的input 都有required的属性 表示表单必填 　　　ng-disabled="userForm.$invalid" 表示按钮的是否点击状态 取决于表单是否都已经填写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>button {background: green;width: 100px;height: 20px;}button[disabled] {background: rgb(116, 119, 116)}</style>
</head>
<body ng-app="validationApp" ng-controller="mainController"><script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.js"></script><script src="https://cdn.bootcss.com/angular.js/1.5.5/angular.js"></script><script>var validationApp = angular.module('validationApp', []);validationApp.controller('mainController', function($scope) {console.log(regForm.phone.$pristine)$scope.submitForm = function(isValid) {console.log(111);$scope.regForm.already = true;if (isValid) {console.log($scope.rphone)console.log($scope.rsmg)console.log($scope.rpwd)return false}};});</script><div><h3>注册</h3><form  name="regForm" novalidate><div><label>正确的手机号</label><input type="text" name="phone" ng-model="rphone" ng-pattern="/[0-9]{11}/" required /><p ng-show="regForm.phone.$invalid &&  !regForm.phone.$pristine">请输入正确的手机号</p><p ng-show="regForm.already">手机已经注册</p></div><div><label>请输入4手机code</label><input type="text" name="smg" ng-model="rsmg" ng-pattern="/[0-9]{4}/" required /><p ng-show="regForm.smg.$invalid &&  !regForm.smg.$pristine">请输入4手机code</p></div><div><label>11pwd</label><input type="text" name="pwd" ng-model="rpwd" ng-pattern="/[0-9]{6,11}/" required /><p ng-show="regForm.pwd.$invalid &&  !regForm.pwd.$pristine">请输入6-11pwd</p></div><button type="button"  ng-disabled="regForm.$invalid" ng-click="submitForm(regForm.$valid)">Submit</button> </form></div></body>
</html>

转载于:https://www.cnblogs.com/adouwt/p/9450554.html

angularjs的表单验证相关推荐

AngularJS自定义表单验证
Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证(required ...
angularjs php登录验证,AngularJs表单验证的方法
Anjularjs表单验证能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的.在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要. 表单验证不仅能给用户提供有用的反馈,同时也能 ...
angularJS 表单验证
通过angularJS 进行的表单验证需要在表单中设置novalidate属性 novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 ...
angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
AngularJS中的表单验证机制
客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就写出一个具有交互性和可响应的现代化HTML5表单. angularJs实现了大多数的HTML5表单域 ...
angularjs表单验证_AngularJS表单验证
angularjs表单验证 We have updated this article for Angular 1.3 and the new ng-touched feature. 我们已经为Angu ...
AngularJS表单验证
表单网页中用户于服务端交互数据的表单控件有input.select.textarea,而表单是将为了达到一个目的(登录.注册等)各种控件整合到一起的一个集合. 表单和其中的表单控件提供了验证服务,可 ...
AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)
这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...
表单验证AngularJs
参考博客: https://www.cnblogs.com/rohelm/p/4033513.html 常用的表单验证指令 1. 必填项验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5 ...

angularjs的表单验证

angularjs的表单验证

angularjs的表单验证相关推荐

最新文章

热门文章