BootStrap与validator 使用笔记(JAVA SpringMVC实现)

<!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件（一般不用引入） --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><!-- Bootstrap Validator JS文件 --><script src="//cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>　　<!-- Bootstrap Validator 样式文件 --><link href="//cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">　　<!-- Bootstrap Validator 中文语言包 --><script src="//cdn.bootcss.com/bootstrap-validator/0.5.3/js/language/zh_CN.min.js"></script>

<form class="form-horizontal"><div class="form-group"><label class="col-lg-3 control-label">Username</label><div class="col-lg-9"><input type="text" class="form-control" name="username" /></div></div><div class="form-group"><label class="col-lg-3 control-label">Email address</label><div class="col-lg-9"><input type="text" class="form-control" name="email" /></div></div></form>

<script>$(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: { //与表单里input的name属性对应message: 'The username is not valid', //验证错误时的信息，当然这里是可以使用中文的validators: {notEmpty: { //非空判断message: 'The username is required and cannot be empty' //验证错误时的信息，},stringLength: { //长度判断min: 6, //不得小于max: 30, //不得超过message: 'The username must be more than 6 and less than 30 characters long' //验证错误时的信息，},regexp: { //正则表达式判断 regexp: /^[a-zA-Z0-9_]+$/, //表达式内容message: 'The username can only consist of alphabetical, number and underscore' //验证错误时的信息，}}},email: {validators: {notEmpty: {message: 'The email is required and cannot be empty'},emailAddress: { //是不是正确的email格式message: 'The input is not a valid email address' }}}}});});</script>

<form id="captchaForm" class="form-horizontal"><div class="form-group"><label class="col-lg-3 control-label" id="captchaOperation"></label><div class="col-lg-2"><input type="text" class="form-control" name="captcha" /></div></div></form>

<script>$(document).ready(function() {// 随机取min,max中间的一个数function randomNumber(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);};// 生成随机两个数相加的文字显示内容，显示到capchaOperation中去$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));　　 $('#captchaForm').bootstrapValidator({ //验证feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {captcha: {validators: {callback: { //callback方式message: 'Wrong answer',callback: function(value, validator) { //您可以在这里实现自定义功能// Determine the numbers which are generated in captchaOperation　　　　　　　　　　　　　　　　//这里面value就是input里输入的值 var items = $('#captchaOperation').html().split(' '),sum = parseInt(items[0]) + parseInt(items[2]);return value == sum;}}}}}});});</script>

<form class="form-horizontal"><div class=" form-group has-feedback has-error"><label for="loginName" class="col-sm-3 control-label ">用户名：</label><div class="col-sm-5"><div class="input-group"><input type="text" class="form-control" id="loginName" name="loginName" placeholder="请输入您登录用的用户名"><span class="input-group-addon">  </span></div></div></div></form>

<script>$(function () {$('form').bootstrapValidator({message: 'This value is not valid',feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {loginName: {message: '用户名验证失败',validators: {notEmpty: {message: '用户名不能为空'},stringLength: {min: 6,max: 18,message: '用户名长度必须在6到18位之间'},regexp: {regexp: /^[a-zA-Z0-9_]+$/,message: '用户名只能包含大写、小写、数字和下划线'},remote: {message: '用户名已经存在',url: '/ajax/checknewuser', //Action的地址，这里我试过，应该是不能加入EL，但网上看到可以加<%=%>输出某个值，我试验没成功，不知道为什么data:{ //传参数username:function(){return $("#loginName").val()}, //username参数名，不用引号，如果想传入特定控件的值一定加入function,这样才能把值传入，不知道为什么……},delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）type: 'POST'//请求方式}}}}});});</script>

package com.aocshallo.actions.ajax;import java.io.IOException;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import org.json.JSONObject;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;@Controller@RequestMapping("/ajax")public class AjaxAction extends BaseAction {public AjaxAction() {// TODO Auto-generated constructor stub}@RequestMapping("/checknewuser")public void checkNewUser(HttpSession session,HttpServletRequest request,HttpServletResponse response) throws IOException{//。。。。 这是您的判断逻辑Boolean ret = true; // 这是最终返回值//下面是response的设置response.setContentType("text/xml;charset=utf-8"); response.setHeader("Cache-Control","no-cache"); try { //这是输出为JSON串的一种方式，结果应为JSON串，属性名一定是valid，值为true或falseJSONObject jsobjcet = new JSONObject(); jsobjcet.put("valid", ret);response.getWriter().write(jsobjcet.toString()); //System.out.println(jsobjcet.toString()); } catch (IOException e) { e.printStackTrace(); } }}

{"valid":false} //表示不合法，验证不通过{"valid":true} //表示合法，验证通过