layui的表单验证支持ajax判断用户名是否重复

如下图所示：

在表单中，我们要在提交之前判断用户名是否存在，这在layui中是不支持的。on bulr()失去焦点事件，是按钮手动触发的，表单不是很漂亮，可以使用表单表单的verify进行验证。

html:

div class=' layui-form-item ' label class=' layui-form-label '用户名/标签div class='layui-input-block '输入类型=' text ' id=' username ' name=' username ' autocomplete=' off ' class=' layui-input ' lay-verify='username ' place h Holder='请输入用户名'/div /div注意lay-verify=' username '来定义js文件中的验证事件。js:

Form.verify({ //提交验证条件表单时用户名可用时触发，username :函数(值){vardata={username :值}；var消息=' '；$ .ajax ({type:' post '，url:xxx(对应后台方法)，async: false，//改为同步请求内容type : ' application/JSON；Charset=utf-8 '，data:json.stringify(数据)，datatype :' JSON '，success3360function(数据){if (data) {} else {message='用户名已经存在，请重新输入！'} } });//注意需要在ajax方法if (message！==' ')返回消息；}});背景方法：

//管理员注册时，验证用户名是否可用@ requestmapping(值='/XXX '，方法=requestmethod.post，consumes=' application/JSON ')@ response body public boolean to verifusername(@ request body Admin Admin){ String username=Admin . getusername()；System.out.println(用户名)；//根据用户名查询管理员(包括恢复导致bug时状态为0的那个)admin admin 1=adminservice . findbysername(用户名)；if(admin1==null){ system . out . println(111)；//如果返回true，则不能注册用户名；返回真；} else { system . out . println(222)；返回false}}效果：

上面这个layui的表单验证支持ajax判断用户名是否重复的例子，就是边肖分享给大家的全部内容。希望能给大家一个参考，多支持我们。