使用AngularJS進行表單驗證不起作用
[英]Form validation using AngularJS not working
問題描述
我打算使用AngularJS進行簡單的表單驗證，但似乎無法正常工作。 這是我的plunkr文件： http ://plnkr.co/edit/sEPAhszlFofLfb87uh8S。
我不知道為什么，一切看起來都不錯，但沒有成功。
我的html文件：
<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<style>
body { padding-top:30px; }
</style>
<!-- JS -->
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="validationApp" ng-controller="mainController">
<div class="container">
<!-- PAGE HEADER -->
<div class="page-header">
<h1>AngularJS Form Validation</h1>
</div>
<!-- =================================================================== -->
<!-- FORM ============================================================== -->
<!-- =================================================================== -->
<!-- pass in the variable if our form is valid or invalid -->
<form name="regForm" ng-submit="submitForm(regForm.$valid)" novalidate>
<!-- NAME -->
<div class="form-group item item-input" ng-class="{ 'has-error' : regForm.name.$invalid && (regForm.name.$dirty || submitted)}">
<input type="text" name="name" class="form-control" ng-model="user.name" placeholder="Full Name" ng-required="true">
<br/>
<p ng-show="regForm.name.$error.required && (regForm.name.$dirty || submitted)" class="help-block">Please provide your full name</p>
</div>
<div class="form-group item item-input" ng-class="{ 'has-error' : regForm.email.$invalid && (regForm.email.$dirty || submitted)}">
<input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Email Address" ng-required="true">
<p ng-show="regForm.email.$error.required && (regForm.email.$dirty || submitted)" class="help-block">Email is required.</p>
<p ng-show="regForm.email.$error.email && (regForm.email.$dirty || submitted)" class="help-block">Enter a valid email.</p>
</div>
<div class="form-group item item-input" ng-class="{ 'has-error' : regForm.contactno.$invalid && (regForm.contactno.$dirty || submitted) }">
<input type="text" name="contactno" class="form-control" ng-model="user.contactno" placeholder="Phone number" ng-pattern="^0[0-9]{2}[- ]?[0-9]{3} ?[0-9]{4,5}$" maxlength="11" ng-required="true">
<p ng-show="regForm.contactno.$error.required && regForm.contactno.$error.pattern && (regForm.contactno.$dirty || submitted)" class="help-block">Enter a valid phone number.</p>
</div>
<div class="form-group item item-input" ng-class="{ 'has-error' : regForm.org.$invalid && (regForm.org.$dirty || submitted)}">
<input type="text" name="org" class="form-control" ng-model="user.org" placeholder="Organization Name" ng-required="true">
<p ng-show="regForm.org.$error.required && (regForm.org.$dirty || submitted)" class="help-block">Please input name of your organization</p>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
我的js文件：
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
});
我只需要它來驗證所有必填字段都具有相關的輸入，而不是空字段。
2 個解決方案
解決方案1
1 2015-04-29 07:16:25
您的ng-pattern應該是ng-pattern="/^[0-9]{2}[- ]?[0-9]{3} ?[0-9]{4,5}$/"而不是ng-pattern="^0[0-9]{2}[- ]?[0-9]{3} ?[0-9]{4,5}$" regx模式應在開頭使用轉義字符/表達式的結尾。
解決方案2
0 2015-04-29 07:17:20
根據角度文檔，您的模式是錯誤的：
ngPattern（可選）字符串
如果該值與RegExp模式表達式不匹配，則設置模式驗證錯誤密鑰。 對於內聯模式，期望值為/ regexp /；對於定義為范圍表達式的模式，期望值為regexp。
因此，在模式的開頭和結尾加上斜杠應該可以
表單驗證在angularJs中不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.