尝试根据本教程https://www.youtube.com/watch?v=R-5loy9X6KE&feature=youtu.be和此github页面https://github.com/nelsonomuto/angular-ui-form-validation创建角度ui表单验证,但它似乎无法正常工作。
我的索引页
<html>
<head>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js@1.2.10" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="angular-ui-form-validation.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="angularUiFormValidationApp">
<form name="loginData" novalidate ng-controller="MainCtrl">
<div class="list list-inset login-form">
<i class="fa fa-users"></i>
<input type="text" name="orgCode" class="form-control" ng-model="user.orgCode" placeholder="Organization Code" validation-no-space="true" validation-field-required="true" validation-no-special-chars="true" validation-dynamically-defined="locallyDefinedValidations">
<br/><i class="fa fa-envelope"></i>
<input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Email Address" ng-required="true">
<br/><i class="fa fa-lock"></i>
<input type="Password" name="password" class="form-control" ng-model="user.password" placeholder="Your Password" validation-min-length="8" validation-field-required="true" validation-no-space="true" >
<div class="login-btn">
<button class="button button-block button-positive" type="submit">Log in</button>
</div>
</div>
</form>
</body>
</html>
我的脚本,js文件
angular.module('angularUiFormValidationApp', [
'angularUiFormValidationApp', 'directives.customvalidation.customValidationTypes'
])
.controller('MainCtrl', function ($scope) {
angular.extend($scope, {
user: {
orgCode: null,
password: null,
confirmPassword: null,
email: null,
firstName: null,
lastName: null
},
locallyDefinedValidations: [
{
errorMessage: 'Cannot contain the number one',
validator: function (errorMessageElement, val){
return /1/.test(val) !== true;
}
},
{
errorMessage: 'Cannot contain the number two',
validator: function (errorMessageElement, val){
return /2/.test(val) !== true;
}
}
]
});
});
附件是我的plunkr文件 http://plnkr.co/edit/44i7Dp?p=info