1、引入angular js 库，这里不多说了。
2、表单验证都基于angular js指令。
直接上源码：
<div class="container">
<form class="form-horizontal" role="form" name="myForm">
<div class="form-group">
<label class="control-label col-md-1">name:</label>
<div class="col-md-3">
//ng-focusng-blur 判断此文本框是否是焦点，若不添加这两个指令，则会实时校验
//ng-minlength 设置文本框最小长度
//ng-maxlength 设置文本框最大长度
//require 必填项
<input type="text" class="form-control" ng-model="user.name"ng-focus="focus=true" ng-blur="focus=false"name="userName" placeholder="name"ng-minlength="5" required/>
</div>
//输入非法时错误信息提示内容
<div role="alert" class="error" >
<span ng-show="myForm.userName.$error.minlength && !focus">Too short!</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-1">email:</label>
<div class="col-md-3">
<input type="email" ng-model="user.email" name="email" class="form-control" placeholder="zhangsan@" required/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-1">sex:</label>
<div class="col-md-2">
<select class="form-control">
<option selected="selected">male</option>
<option>female</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-1">phoneNo:</label>
<div class="col-md-3">
//ng-pattern 正则校验，此处仅校验以1开头的11位数字
<input type="tel" ng-model="user.phoneNo" name="pnoneNo" class="form-control" ng-focus="focus=true" ng-blur="focus=false"ng-pattern="/^1\d{10}$/"placeholder="数字"/>
</div>
//输入无效时错误提示内容
<div role="alert" class="error" >
<span ng-show="myForm.pnoneNo.$invalid && !focus">It is not phoneNo!</span>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
//ng-disabled 表单中有非法值时，提交按钮不可有，即不能提交
<input type="submit"ng-disabled="myForm.$invalid"class="btn btn-primary col-md-offset-5" value="regist"/>
</div>
<div class="col-md-1">
<input type="reset" class="btn btn-primary" value="cancel"/>
</div>
</div>
</form>
</div>
正则表达式可以校验很多场景，至于正则表达式的写法在百度自己搜索吧！
