0
我有兩種情況下的測試,但在七種情況下,它不起作用。 我的angularjs版本是1.6.2angularjs表單驗證?
以下是我的html格式的代碼。
<form class="form-horizontal createForm" role="form" id="validateForm" novalidate ng-init="isEmpty = false;" name="userCreateForm">
<div class="form-group">
<label class="control-label labelSame">姓名 :</label>
<div class="input-group">
<input type="text" class="form-control"
name="createName"
ng-model="createName"
placeholder="請輸入用戶姓名"
ng-pattern="regularList.uniqueName"
required
ng-blur="userCreateForm.createName.$blured = false;errorShow()"
ng-focus="userCreateForm.createName.$blured = true; endErr='';"
autocomplete="off"/>
<span style="color:#F36856;display:inline-block;width:350px;position: absolute; top: 7px;left:450px;" ng-if="userCreateForm.createName.$blured == false && userNameErr"><img src="../app/assets/image/error.png"/>{{userNameErr}}</span>
</div>
</div>
<div class="form-group">
<label class="control-label labelSame">部門 : </label>
<div class="input-group">
<input type="text" class="form-control"
ng-model="createDepart"
name="createDepart"
placeholder="請輸入部門"
required
ng-pattern="regularList.depart"
ng-blur="userCreateForm.createDepart.$blured = false;errorShow()"
ng-focus="userCreateForm.createDepart.$blured = true; endErr='';"/>
<span class="error" ng-if="userCreateForm.createDepart.$blured == false && departErr"><img src="../app/assets/image/error.png"/>{{departErr}}</span>
</div>
</div>
<div class="form-group" >
<label class="control-label labelSame">角色 : </label>
<div class="input-group">
<select ng-model="firstRole" class="form-control selectForm" ng-init="role = '操作員'">
<option ng-repeat="role in roleList" value="{{role.id + ':' + role.code}}">{{role.roleName}}</option>
</select>
</div>
</div>
<div class="form-group" >
<label class="control-label labelThree">用戶名 : </label>
<div class="input-group">
<input type="text" class="form-control"
name="createUser"
ng-model="createUser"
required
placeholder="請輸入6-32字符的英文或數字"
ng-pattern="regularList.pwd"
ng-blur="userCreateForm.createUser.$blured = false; errorShow()"
ng-focus="userCreateForm.createUser.$blured = true; endErr='';"/>
<span class="error" ng-if="userCreateForm.createUser.$blured == false && userErr"><img src="../app/assets/image/error.png"/>{{userErr}}</span>
</div>
</div>
<div class="form-group" >
<label class="control-label labelForth">初始密碼 : </label>
<div class="input-group">
<input type="text" class="form-control"
name="createPassword"
ng-model="createPassword"
required
ng-pattern="regularList.password"
placeholder="必須包含6-32字符的大小寫英文或數字組合不包含特殊字符"
ng-blur="userCreateForm.createPassword.$blured = false;errorShow()"
ng-focus="userCreateForm.createPassword.$blured = true; endErr='';"/>
<span class="error" ng-if="userCreateForm.createPassword.$blured == false && passwordErr"><img src="../app/assets/image/error.png"/>{{passwordErr}}</span>
</div>
</div>
<div class="form-group" >
<label class="control-label labelSame">手機 : </label>
<div class="input-group">
<input type="text" class="form-control"
name="createPhone"
ng-model="createPhone"
required
placeholder="請輸入11位數字的手機號碼"
ng-pattern="regularList.telphone"
ng-blur="userCreateForm.createPhone.$blured = false;errorShow()"
ng-focus="userCreateForm.createPhone.$blured = true; endErr='';"/>
<span class="error" ng-if="userCreateForm.createPhone.$blured == false && phoneErr"><img src="../app/assets/image/error.png"/>{{phoneErr}}</span>
</div>
</div>
<div class="form-group" >
<label class="control-label labelSame">郵箱 : </label>
<div class="input-group">
<input type="text" class="form-control"
name="createEmail"
ng-model="createEmail"
placeholder="請輸入有效的郵箱"
required
ng-pattern="regularList.email"
ng-blur="userCreateForm.createEmail.$blured = false;errorShow()"
ng-focus="userCreateForm.createEmail.$blured = true; endErr='';"/>
<span class="error" ng-if="userCreateForm.createEmail.$blured == false && emailErr"><img src="../app/assets/image/error.png"/>{{emailErr}}</span>
</div>
</div>
<div class="form-group" >
<label class="control-label labelSame">省份 : </label>
<div class="input-group">
<input type="text" class="form-control"
name="createProvince"
ng-model="createProvince"
disabled/>
</div>
</div>
<div class="form-group" >
<label class="control-label labelForth">描述信息 : </label>
<div class="input-group">
<textarea class="form-control formTextarea"
ng-model="createDescription"
placeholder="選填"
ng-pattern="regularList.inputContext"
ng-blur="userCreateForm.createDescription.$blured = false;errorShow()"
ng-focus="userCreateForm.createDescription.$blured = true; endErr='';"></textarea>
<span class="wordStyle"><span class="wordSCount">{{createDescription.length ? createDescription.length : 0}}</span>/64</span>
<span class="error" ng-if="userCreateForm.createDescription.$blured == false && descriptErr"><img src="../app/assets/image/error.png"/>{{descriptErr}}</span>
</div>
</div>
以下是JavaScript代碼來驗證輸入正確的。
$scope.errorShow = function() {
if ($scope.userCreateForm.createName.$error.required) {
$scope.userNameErr = "姓名不能爲空";
} else if ($scope.userCreateForm.createName.$error.pattern) {
$scope.userNameErr = "請輸入正確的姓名";
} else if ($scope.userCreateForm.createDepart.$error.required) {
$scope.departErr = "部門不能爲空";
} else if ($scope.userCreateForm.createDepart.$error.pattern) {
$scope.departErr = "請輸入正確的部門";
}else if ($scope.userCreateForm.createUser.$error.required) {
$scope.userErr = "用戶名不能爲空";
} else if ($scope.userCreateForm.createUser.$error.pattern) {
$scope.userErr = "請輸入正確的用戶名";
} else if ($scope.userCreateForm.createPassword.$error.required) {
$scope.passwordErr = "初始密碼不能爲空";
} else if ($scope.userCreateForm.createPassword.$error.pattern) {
$scope.passwordErr = "請輸入正確的密碼";
} else if ($scope.userCreateForm.createPhone.$error.required) {
$scope.phoneErr = "手機號不能爲空";
} else if ($scope.userCreateForm.createPhone.$error.pattern) {
$scope.phoneErr = "請輸入正確的手機號";
} else if ($scope.userCreateForm.createEmail.$error.required) {
$scope.emailErr = "郵箱不能爲空";
} else if ($scope.userCreateForm.createEmail.$error.pattern) {
$scope.emailErr = "請輸入正確的郵箱";
} else if ($scope.userCreateForm.createDescription.$error.pattern) {
$scope.descriptErr = "長度不能超過64位";
} else {
$scope.userNameErr = "";
$scope.departErr = "";
$scope.userErr = "";
$scope.passwordErr = "";
$scope.phoneErr = "";
$scope.emailErr = "";
$scope.descriptErr = "";
}
};
以下是常規代碼
$rootScope.regularList = {
telphone: /^1[34578]\d{9}$/,
email: /^[a-z0-9A-Z]+([-|_|\.]+[a-z0-9A-Z]+)*@([a-z0-9A-Z]+[-|\.])+[a-zA-Z]{2,5}$/,
password: /(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9]{6,32}/,
code: /^[0-9]{4}$/,
uniqueName: /^[a-zA-Z|\u4E00-\u9FFF]{4,32}$/,
depart: /^[a-zA-Z0-9|\u4E00-\u9FFF]{4,32}$/,
pwd: /^((?=.*[0-9])|(?=.*[a-zA-Z0-9])|(?=.*[a-zA-Z])).{4,32}$/,
pic: /^[0-9a-zA-Z]{4}$/,
inputContext:/^.{1,64}$/
};
但errorShow的功能不起作用。希望你能給我一些建議。 非常感謝。
你的建議沒有工作。 –