标签：console name 验证 ng angularjs scope 表单 log
angularjs的表单验证
废话：angular的热度在减小，但是老项目依旧是angular的，就是不能丢，得会
干活直接上代码
注意：这里是表单提交 如果上述红色部分不写 或者是 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">要的是abbp> 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>Documenttitle>
<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手机codelabel>
<input type="text" name="smg" ng-model="rsmg" ng-pattern="/[0-9]{4}/" required />
<p ng-show="regForm.smg.$invalid && !regForm.smg.$pristine">请输入4手机codep>
div>
<div>
<label>11pwdlabel>
<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-11pwdp>
div>
<button type="button" ng-disabled="regForm.$invalid" ng-click="submitForm(regForm.$valid)">Submitbutton>
form>
div>body>html>
标签：console,name,验证,ng,angularjs,scope,表单,log 来源： https://blog.51cto.com/u_15200634/2774119
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。