bootstrap:bootstrapValidator校验数据是否可用（验证账户名是否重复）

博风

于 2023-12-25 13:59:59 发布

阅读量615

点赞数 7

分类专栏：前端 # bootstrap 文章标签： bootstrap 前端 javascript

本文链接：https://blog.csdn.net/Bof_jangle/article/details/135197884

版权

前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

bootstrap

8 篇文章 0 订阅

订阅专栏

1、html内容

<form id="jangleEditForm" name="jangleEditForm" class="formJ" >
				
				<div class="form-group" >
					<label for="code">账户：</label>
					<input type="text" class="form-control" id="code" name="code" placeholder="请输入账户">
				</div>
				<div class="form-group" >
					<label for="password">密码：</label>
					<input type="text" class="form-control" id="password" name="password" placeholder="请输入密码">
				</div>
				
			</form>

2、bootstrap的校验

/*!
 * demo专用js
 * 
 */

// 校验的渲染
$("#jangleEditForm").bootstrapValidator({
	message : 'This value is not valid',
	feedbackIcons : {
		valid : 'glyphicon glyphicon-ok',
		invalid : 'glyphicon glyphicon-remove',
		validating : 'glyphicon glyphicon-refresh'
	},
	fields : {
		code : {
			validators : {
				notEmpty : {
					message : "请输入账户，用于登录"
				},
				remote:{
					message :"账户已被注册",
					url:'/bsUserCtrl/valid',
					delay:1000,
					type:"POST"
				}
			}
		}
	}
});

3、控制层代码：


@Controller
@RequestMapping("/bsUserCtrl")
public class BsUserCtrl {

	@Autowired
	private BsUserService bsUserService;

	@RequestMapping("valid")
	@ResponseBody
	Map<String, Object> valid(@RequestParam(required = false) String code) {
		return bsUserService.valid(code);
	}

}

4、业务层核心代码


@Service
public class BsUserServiceImpl implements BsUserService {
	
	@Autowired
	private BsUserMapper bsUserMapper;

	@Override
	public Map<String, Object> valid(String code) {
		Map<String, Object> map = new HashMap<String, Object>();
        // 根据账号查询是否存在用户
		BsUser user = bsUserMapper.selectByCode(code);
		if(user == null) {
			map.put("valid", true);
		}else {
			map.put("valid", false);
		}
		return map;
	}

}