EasyUI自定义验证-ajax验证用户名是否可用,成功并跳转页面
ValidateBox是easyui的表单验证工具 官方介绍
validatebox是用来验证表单input框的,如果用户输入了无效的数据,它该变背景颜色,提示警告信息。validatebox可以集成在表单中,在提交时阻止无效的字段。 用法
自定义验证规则
自定义验证规则,需要重写$.fn.validatebox.defaults.rules来自定义验证规则和提示消息,如下是一个验证最小长度的示例。 $.extend($.fn.validatebox.defaults.rules,{
minLength: {
validator: function(value,param){
return value.length >= param[0];
},message: 'Please enter at least {0} characters.'
}
});
现在就可以使用minLength来验证输入框的输入最少为5个字符 <input class="easyui-validatebox" data-options="validType:'minLength[5]'">
其他信息参考EasyUI官网 下面给出一个服务器端验证用户名是否被注册的示例 验证用户名是否可用服务器端验证代码如果用户名是”刘德华”就验证不通过,其它的验证通过 @ResponseBody
@RequestMapping(value = "/check",method = RequestMethod.POST)
public String checkUsername(HttpServletRequest request,String username) {
System.out.println(username);
boolean isOk = false;
if(username.equals("刘德华")){
isOk = true;
}
//System.out.println(userService.isExists(username)+"");
//return userService.isExists(username)+"";
return isOk+"";
}
自定义验证规则$.extend($.fn.validatebox.defaults.rules,{
myvalidate : {
validator : function(value,param) {
var username = $("#username").val().trim();
console.log(username);
var haha = " ";
$.ajax({
type : 'post',async : false,url : 'http://localhost:8080/testwechat/hello/check',data : {
"username" : username
},success : function(data) {
haha = data;
}
});
console.log(haha);
return haha.indexOf("true");
},message : '用户名已经被占用'
}
});
验证时机function submitForm() {
$('#ff').form('submit',{
//这种方式不会跳转
//url : 'world.html',
onSubmit : function() {
return $(this).form('enableValidation').form('validate');
},success:function(data){
if (data.success == 'false') {
$.messager.alert('提示',data.msg,'info');
}else{
//验证通过后跳转页面
location.href = 'world.html';
}
}
});
}
function clearForm() {
$('#ff').form('clear');
}
表单代码<div style="padding: 10px 60px 20px 60px">
<form id="ff" class="easyui-form" method="get" action="world.html">
<table cellpadding="5">
<tr>
<td>Name:</td>
<td>
<input id="username" class="easyui-textbox" type="text" name="username" data-options="required:true,validType:'myvalidate'"></input>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input>
</td>
</tr>
</table>
</form>
<div style="text-align: center; padding: 5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
</div>
</div>
需要引入的js和css <!-- easyui --> <link rel="stylesheet" type="text/css" href="${base }/assets/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${base }/assets/js/easyui/themes/icon.css"> <script type="text/javascript" src="${base }/assets/js/easyui/jquery.min.js"></script> <script type="text/javascript" src="${base }/assets/js/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="${base }/assets/js/easyui/locale/easyui-lang-zh_CN.js"></script> <!-- easyui --> 效果图 代码修改自EasyUI官方demo参考文献
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |