seanyujc/Angularjs表单验证.md

## Angularjs表单验证.md

      
    Raw
  

              Angularjs表单验证.md
            
          
    目录


构造表单
Angularjs验证
表单数据的绑定

构造表单

一个用户体验良好表单的基本要素：

提供明确的引导提示
用好占位符placeholder
点击标签可以聚焦到对应的输入框
排好tabindex
尽量少地让用户填写信息，必填的放到上面

一个例子
form
‎  label[for]{登录名}
  input[type="text" id placeholder="请输入手机号码/邮箱/昵称"]
  input[type="password" id placeholder="请输入6位以上密码"]
  span.error{请输入}
  button{提交}

用bootstrap快速创建一个表单

拷贝粘贴下列代码
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
在input之后加入提示
<span class="error">请输入邮箱</span>
修改bootstrap的表单样式
.form-group{
    position: relative;
}
.form-control{
  width: 300px;
  float: left;
}
.error{
  position: absolute;
  white-space: nowrap;
  line-height: 34px;
  padding-left: 10px;
}
Angularjs验证

在加入些必要的属性，form和input加入name属性，form中接入ng-submit，input加入ng-model指令。在加入验证类型。

改造后的结构：
form[name="form" ng-submit="submit(form)"]
‎  label[for="email"]
  input[id="email" name="email" ng-model="email" required]
  span.error{请输入}
  button{提交}

在ng controler中
$scope.submit = (form) => {
  // 如果验证失败
  $log.log(form);
  if(form.$invalid){
    return;
  }
}
再做一些准备

现在点击提交如果有错误会默认弹出浏览器的html5表单验证，并且阻止了表单的提交事件，我们的submit事件没有触发。
失效html5的验证失败消息为表单加入“novalidate”属性。这是一个html5的属性，目的是失效默认的表单验证，转为angularjs验证。
form[name ng-submit novalidate]
‎  label[for]
  input[id name ng-model required]
  span{请输入}
  button{提交}

一个简单的验证

必填required实现了
<form class="form-horizontal" name="loginForm" ng-submit="submit(loginForm)" novalidate>
  <div class="form-group">
    <label for="email" class="col-sm-2 control-label">登录名</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" name="email" ng-model="email" required placeholder="请输入邮箱/电话/昵称">
      <span class="error" ng-show="loginForm.email.$error.required">请填写登录名</span>
    </div>
  </div>
  <div class="form-group">
    <label for="password" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password" name="password" ng-model="password" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
在ng controler中
$scope.submit = (form) => {
  // 如果验证失败
  $log.log(form);
  if(form.$invalid){
    return;
  }
}
验证类型

required  // 必填

email  // 邮箱格式

pattern // 自定义正则表达式验证
手机号验证
pattern="^1\d{10}"
显示验证失败消息和时机控制

上面的这段"loginForm.email.$error.required"代码是什么？

通过判断表单对象的$error属性，来获取验证状态，如果有验证类型为true，则失败
loginForm对象中的结构如下：
formObject: {
  // 表单和控件中都有$error属性，这里是验证错误的合集
  $error: {
    required: boolean; // 必选
    email: boolean; // 邮件格式
    pattern: boolean; // 正则自定义验证
  },
  // email控件对象
  email: {
    $error: {
      required: boolean; // 必选
      email: boolean; // 邮件格式
      pattern: boolean; // 正则自定义验证
    }
  }
}

验证错误显示时机限制列表。从更早到晚排序。

三个时机：

$touched 失去焦点后
$pristine 修改内容后
$submitted 提交后

在表单对象中对应的位置
formObject: {
  $submitted: boolean, // 判断用户是否提交
  $pristine: boolean, // 判断用户是否修改了表单
  email: {
    $error: {
      required: boolean;
    }
  }
}

示例
<!-- 控件失去焦点后 -->
<span class="error" ng-show="regForm.email.$touched && regForm.email.$error.required">请输入登录名</span>
<span class="error" ng-show="regForm.email.$touched && regForm.email.$error.email">请输入正确的格式</span>
表单数据的绑定

动态表单  

有时候需要由用户决定表单的控件生成。
<button type="button" ng-click="add()">添加</button>
<table class="table table-striped">
  <tr>
    <th>字段名</th>
    <th>类型</th>
  </tr>
  <tr ng-repeat="n in list">
    <td ng-class="{'has-error': regForm.$submitted && regForm.name{{$index}}.$invalid}">
      <input class="form-control" type="text" name="name{{$index}}" required ng-model="n.name"></td>
    <td ng-class="{'has-error': regForm.$submitted && regForm.type{{$index}}.$invalid}">
      <input class="form-control" type="text" name="type{{$index}}" required ng-model="n.type"></td>
  </tr>
</table>
$scope.list = [{
  name: "",
  type: "",
}];
$scope.add = () => {
  $scope.list.push({ name: "", type: "" });
};
数据填充

按照以前的习惯