angularJS 表单校验

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}$/
};

校验一直出现问题,请教各位大神看下

谢谢

阅读 1.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题