angularJS 表单校验效率
<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>
</form>
$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: /^(?![0-9a-zA-Z]+$)[0-9A-Za-z]{6,32}$/,
// password: /^((?=.*?[A-Za-z]+)(?=.*?[0-9]+)(?=.*?[A-Z]).*).{6,32}$/,
password: /(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9]{6,32}/,
// 验证码校验
code: /^[0-9]{4}$/,
// 身份证
idCard: /^(([1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4})|([1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|(X|x))))$/,
ipv4: /^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))[.]){3}(([0-1]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/,
//真实姓名校验,不是特殊字符
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}$/
};
校验一直出现问题,请教各位大神看下
谢谢