表单验证----bootstrapValidator

1、引入在线的css、js文件（注意：如果想下载导入到项目，可以在浏览器打开该链接，点击右键，将文件另存为本地文件）

<!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="http://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet" />
  
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 
  <!-- 最新的 Bootstrap 核心 JavaScript 文件  -->
  
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

2、jsp页面

<!-- 注册表单 -->
 <form class="form-horizontal" action="register" method="post" id="registerForm">
 	
   <!-- 输入用户账号 -->
  <div class="form-group">
    <label class="col-sm-3 control-label">Username</label>
    <div class="col-sm-9">
      <input type="text" name="username" class="form-control" placeholder="请输入用户账号，只能由6-20个字母或者数字组成">
    </div>
  </div>
  
  <!-- 输入密码 -->
  <div class="form-group">
    <label class="col-sm-3 control-label">Password</label>
    <div class="col-sm-9">
      <input type="password" name="password" class="form-control" placeholder="请输入密码，只能由6-20个字母、数字、点和下划线组成">
    </div>
  </div>
  
  <!-- 确认密码 -->
  <div class="form-group">
    <label class="col-sm-3 control-label">RePassword</label>
    <div class="col-sm-9">
      <input type="password" name="rePassword" class="form-control" placeholder="请确认密码">
    </div>
  </div>
  
  <!-- 输入姓名 -->
  <div class="form-group">
    <label class="col-sm-3 control-label">Name</label>
    <div class="col-sm-9">
      <input type="text" name="name" class="form-control" placeholder="请输入姓名">
    </div>
  </div>
  
  <!-- 输入电子邮箱 -->
  <div class="form-group">
    <label class="col-sm-3 control-label">Email</label>
    <div class="col-sm-9">
      <input type="text" name="email" class="form-control" placeholder="请输入电子邮箱">
    </div>
  </div>
  
  <!-- 输入手机号码 -->
  <div class="form-group">
    <label class="col-sm-3 control-label">Phone</label>
    <div class="col-sm-9">
      <input type="text" name="phone" class="form-control" placeholder="请输入手机号码">
    </div>
  </div>
  
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <button type="submit" class="btn btn-default">Sign up</button>
    </div>
  </div>
</form>

3、js文件

<script type="text/javascript">
$(document).ready(function() {
    
	//表单验证
    $('#registerForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {                        //输入框不同状态，显示图片的样式
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {                               //验证域
            	
            	//校验用户账号
                username: {                         //键名username和input的name属性值对应
                    message: 'The username is not valid',
                     threshold :  6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                    validators: {
                        notEmpty: {                 //非空提示
                            message: '用户名不能为空'
                        },
                        stringLength: {            //长度提示
                            min: 6,
                            max: 20,
                            message: '用户名长度必须在6到20之间'
                        },                         
                        regexp: {                  //正则表达式匹配
                            regexp: /^[a-zA-Z0-9]+$/,
                            message: '用户名由数字或者字母组成'
                        },
                       
                        //ajax验证。服务器返回{"valid",true}证明该账号可用，反之不可用并出现提示信息。
                        remote: {
                            url: 'register/checkUserNotExist',          //验证地址
                            message: '用户已存在',      //提示消息
                            delay :  2000,  //每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'POST'           //请求方式
                            
                        }
                    }
                },
                
                //校验用户密码
                password: {
                    message:'密码无效',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 20,
                            message: '密码长度必须在6到20之间'
                        },
                        regexp: {                  //正则表达式匹配
                        	regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '密码只能由字母、数字、点和下划线组成'
                        },
                        different: {                //不能和用户名相同
                            field: 'username',     //需要进行比较的input name值
                            message: '不能和用户名相同'
                        }
                    }
                },
                
                //校验确认密码
                rePassword: {
                    message: '密码无效',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 20,
                            message: '密码长度必须在6到20之间'
                        },
                        identical: {              //密码和确认密码要相同
                            field: 'password',     //需要进行比较的input name值
                            message: '两次密码不一致'
                        }
                    }
                },
                
              	//校验用户的名字
                name: {
                    message: 'The name is not valid',
                    validators: {
                        notEmpty: {                 //非空提示
                            message: '姓名不能为空'
                        },
                        stringLength: {            //长度提示
                            min: 2,
                            max: 30,
                            message: '姓名长度必须在2到30之间'
                        }
                    }
                },
                
                //校验邮箱
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
                            message: '请输入正确的邮件地址如：123@qq.com'
                        }
                    }
                },
                
                //校验手机号码
                phone: {
                    message: 'The phone is not valid',
                    validators: {
                        notEmpty: {
                            message: '手机号码不能为空'
                        },
                        stringLength: {
                            min: 11,
                            max: 11,
                            message: '请输入11位手机号码'
                        },
                        regexp: {
                            regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                            message: '请输入正确的手机号码'
                        }
                    }
                },
                
            }
        });
});
</script>

4、后端代码（ssm）

//检查用户是否存在，返回true,证明用户不存在，可用；反之不可用
@ResponseBody
@RequestMapping(value="/checkUserNotExist",method=RequestMethod.POST)
public String checkUserExist(String username)
{
	boolean flag=true;
	String stringJson=null;
	User user=userService.selectByUsername(username);
	if (user!=null) {      //如果用户存在，则设flag为true
		flag=false;
	}
	Map<String, Boolean> map=new HashMap<String,Boolean>();
	map.put("valid", flag);
	try {
		stringJson=new ObjectMapper().writeValueAsString(map);
	} 
	catch (JsonProcessingException e) {
		e.printStackTrace();
	}
	return stringJson;
}