AngularJS 表单验证

angularjs中的form表单元素并非普通的表单元素, 他们都属于controller的实例,拥有一些属性和方法.

form表单实例都是通过name属性来进行标识，所以 form和input都需要加name属性.

<form name="myform">
    <input type="text" name="telephone" placeholder="请输入电话好吗" maxlength="11"
        ng-model="personalInfo.telephone" required  
        ng-maxlength="11" ng-pattern="/^\d{11}$/">
    {{myform.telephone.$valid}}
</form>

form提供的属性都是用来表示表单的验证状态的，
包括：

$pristine      //表单或输入框没有使用
$dirty     //表单或输入框有填写记录
$valid     //表单或输入框,基于你设定的规则是否验证通过
$invalid   //表单或输入框,基于你设定的规则是否验证未通过
$error     //验证错误信息

前4个属性在js中使用方法:

if($scope.myform.$pristine){
    alert(请填写表单);
    return;
}
if($scope.myform.telephone.$invalid){
    alert(请输入正确的电话号码);
    return;
}
if($scope.myform.telephone.$valid){
    alert(祝贺你,电话号码正确);
    return;
}

除$error外，前四个的值为true或false表示相应的状态。$error的值为一个js对象，包含了以下验证内容的状态：

min
max
minlength
maxlength
pattern
required
email
number
url

js中error使用方式

if($scope.myform.telephone.$error.required){
    alert(请输入电话号码);
    return;
}
if($scope.myform.telephone.$error.maxlength || $scope.myform.telephone.$error.minlength){
    alert(电话号码位数错误);
    return;
}

一个表单中的表单元素，会作为这个form的属性自动加在上面，
所以访问页面表单的属性, 模式如下:

<form name>.<angular property> //form
<form name>.<input name>.<angular property>  //表单元素

表单元素必须有ng-model，否则无法触发验证.

angularjs在渲染 表单的一些ng标签的时候, 会把它附加 class上.
例如: class=”ng-pristine ng-validng-invalid ng-dirty”

我们在实际项目中可以通过定义这些class来设置css.

input.ng-pristine {
    background-color: white;
}
input.ng-dirty {
    background-color: lightyellow;
}
input.ng-valid {
    background-color: lightgreen;
}
input.ng-invalid {
    background-color: pink;
}

常用 场景

    <!-- NAME -->
    <div class="form-group">
        <label>Name</label>
        <input type="text" name="name" class="form-control" ng-model="name" required>
        <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">
            姓名是必填的.
        </p>
    </div>

    <!-- USERNAME -->
    <div class="form-group">
        <label>Username</label>
        <input type="text" name="username" class="form-control" 
            ng-model="user.username" ng-minlength="3" ng-maxlength="8">
        <p ng-show="userForm.username.$error.minlength" class="help-block">用户名太短.</p>
        <p ng-show="userForm.username.$error.maxlength" class="help-block">用户名太长.</p>
    </div>

    <!-- EMAIL -->
    <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="email">
        <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">
            请填入一个有效的email.
        </p>
    </div>
    <!-- 提交按钮 -->
    <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>