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-focus ng-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@163.com" 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>
正则表达式可以校验很多场景，至于正则表达式的写法在百度自己搜索吧！
