0
私は2つのケースでテストをしていますが、7つのケースでは動作しません。 私のangularjsバージョンは1.6.2ですangularjsフォーム検証？
以下は私のフォーム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の機能が動作しません。 あなたは私にいくつかの助言を与えることを願っています。 ありがとうございました。
を行く場合のみ、一度このように使用します。 –