表单引入validate验证

   下面讲的这个例子是使用bootstrap模态框（也是一个form表单），现在要做的就是提交表单时进行验证，验证不通过则不提交表单，留在本页面而且显示验证错误信息

1 . 先看验证效果

2 . 引入相关js

3 . 页面加载完成的同时给form表单引入validate()

4 . 在每个input里面编写验证条件

5 . 模态框详细代码如下：

<!-- 添加学员模态框 --> <script type="text/javascript">$().ready(function() {$("#addstudentFrom").validate();})</script>  <div class="modal fade" id="addstudent">            <div class="modal-dialog">              <div class="modal-content">              <form:form id="addstudentFrom" method="post" action="addStudent"  class="form-horizontal" modelAttribute="userHibernate">             <div class="modal-header">添加学员</div>                         <div class="modal-body"><!-- JSR303验证数据 -->                    <div class="form-group">                      <label for="userId" class="col-sm-3 control-label ">学号：</label>                      <div class="col-sm-5">                      <form:input path="userId" class="form-control list-inline {required:true,rangelength:[1,15],messages:{required:'学号不能为空',rangelength:'学号为1-15个字符且不支持中文'}}" />                        </div>                    </div>                                        <div class="form-group">                      <label for="user_name" class="col-sm-3 control-label">姓名：</label>                      <div class="col-sm-5">                         <form:input path="user_name" class="form-control list-inline {required:true,rangelength:[1,15],messages:{required:'姓名不能为空',rangelength:'姓名为1-15个字符且不支持中文'}}"  />                       </div>                    </div>                                                                                                    <div class="form-group">                      <label for="address" class="col-sm-3 control-label">地址：</label>                      <div class="col-sm-5">                        <form:input path="address" class="form-control list-inline {rangelength:[1,225]}" />                       </div>                    </div>                                                                                <div class="form-group">                      <label for="password" class="col-sm-3 control-label">密码：</label>                      <div class="col-sm-5">                         <form:input id="password" type="password" path="password" class="form-control list-inline {required:true,rangelength:[4,20],messages:{required:'密码不能为空且不支持中文',rangelength:'密码为4-20个字符且不支持中文'}}" />                       </div>                    </div>                                        <div class="form-group">                      <label for="" class="col-sm-3 control-label">确认密码：</label>                      <div class="col-sm-5">                           <form:input id="confirm_password" type="password" path="" class="form-control list-inline {required:true,rangelength:[4,20],equalTo:'#password',messages:{required:'确认密码不能为空且不支持中文',rangelength:'确认密码为4-20个字符且不支持中文',equalTo:'两次输入不一致'} }" />                       </div>                    </div>                                                            <div class="form-group">                      <label for="tel" class="col-sm-3 control-label">联系电话：</label>                      <div class="col-sm-5">                         <form:input path="tel" class="form-control list-inline"  />                       </div>                    </div>                                                                                <div class="form-group">                      <label for="email" class="col-sm-3 control-label">电子邮件：</label>                      <div class="col-sm-5">                        <form:input path="email" class="form-control list-inline {email:true,messages:{email:'请输入合法的电子邮件'}}"/>                       </div>                    </div>                                                      <div class="form-group">                      <label for="birthday" class="col-sm-3 control-label">出生年月：</label>                      <div class="col-sm-5"> <form:input path="birthday" onClick="WdatePicker()"  class="form-control list-inline {required:true,messages:{required:'出生年月不能为空'}}"  />                       </div>                    </div>                      <div class="form-group">                      <label for="gender" class="col-sm-3 control-label">性别：</label>                      <div class="col-sm-5">                      <%--  <form:input path="gender" class="form-control list-inline" cssClass="{min:0,max:1,digits:true,required:true}"/>  --%>                                           <form:select path="gender">                      <option>male</option>                      <option selected>female</option>                      </form:select>                                                                  </div>                    </div>                                        </div>                <div class="modal-footer"><input class="btn btn-sm btn-danger" data-dismiss="modal"    type="button" value="取消"><input class="btn btn-sm btn-success submit" id="add_student_save"  type="submit" value="保存"></div> </form:form>              </div>            </div>          </div>

6 . validate实现可以客户端验证，JSR 303 可以实现后台验证（了解即可）

7 . OK，validate验证完整流程演示完毕，谢谢大家