大佬教程收集整理的这篇文章主要介绍了javascript – 使用AngularJS在提交时将空输入字段设置为ng-invalid?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我正在使用的代码:
HTML
<form name="SignUpForm ng-submit="submitUser()" novalidate> <input type="text" name="dob" ng-model="dob" placeholder="Date of Birth" required /> <span class="error" ng-show="signUpForm.dob.$dirty && signUpForm.dob.$invalid">Please provide a valid date of birth</span> <input type="text" name="email" ng-model="email" ng-pattern="/^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/" placeholder="Email" required /> <span class="error" ng-show="signUpForm.email.$dirty && signUpForm.email.$invalid">Please provide a valid email address</span> <button type="submit">Submit</submit> </form>
SASS / CSS
input { &.ng-valid.ng-dirty { color: #fff; background-color: rgba(146,253,156,0.5); border-color: #92fd9c; box-shadow: inset 2px 2px 2px #92fd9c; } &.ng-invalid.ng-dirty { color: #850000; background: rgba(254,186,0.5); border: 1px solid #850000; }
AngularJS
$scope.submitUser = function() { if ($scope.signUpForm.$valid) { // Set form values & construct data to send } else { $scope.response = "Please fill in the required fields"; }
Plunker:
http://plnkr.co/edit/L5qzEJRKkdGogsE7IzAr?p=preview
HTML:
<form name="signUpForm" ng-submit="submitUser()" novalidate> <input type="text" ng-class="{ errorinput: submitted && signUpForm.dob.$invalid }" name="dob" ng-model="dob" placeholder="Date of Birth" required /> <span class="e" ng-show="submitted && signUpForm.dob.$invalid">Please provide a valid date of birth</span> <br> <input type="text" name="email" ng-class="{ errorinput: submitted && signUpForm.email.$invalid }" ng-model="email" ng-pattern="/^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/" placeholder="Email" required /> <span class="e" ng-show="submitted && signUpForm.email.$invalid">Please provide a valid email address</span> <br> <button type="submit">Submit</button> </form>
使用Javascript:
$scope.submitUser = function() { if ($scope.signUpForm.$valid) { } else { $scope.submitted = true; } }
以上是大佬教程为你收集整理的javascript – 使用AngularJS在提交时将空输入字段设置为ng-invalid?全部内容,希望文章能够帮你解决javascript – 使用AngularJS在提交时将空输入字段设置为ng-invalid?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。