前端之家收集整理的这篇文章主要介绍了
EasyUI自定义验证-ajax验证用户名是否可用，成功并跳转页面，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
ValidateBox是easyui的表单验证工具
提供了一些简单的验证，比如email验证，url验证，长度验证等
官方介绍
The validateBox is designed to validate the form input fields. If users enter invalid values,it will change the background color,display the alarm icon and a tooltip message. The validateBox can be integrated with form plugin and will prevent invalid fields from submission.
validateBox是用来验证表单input框的，如果用户输入了无效的数据，它该变背景颜色，提示警告信息。validateBox可以集成在表单中，在提交时阻止无效的字段。
-
第1种用法 创建使用easyui的表单
<input id="vv" class="easyui-validateBox" data-options="required:true,validType:'email'">
-
第2种用法 使用JavaScript验证
"vv">
- 1
- 2
- 3
- 4
$(
'#vv').validate
Box({
required:
true,validType:
'email'
});
第3种用法 自定义验证规则
1
2
3
"pwd" name=
type=
"password" "required:true">
"rpwd" required=
"required" validType=
"equals['#pwd']">
检查两次输入的密码是否一致
1
2
3
4
5
6
7
8
9
$.extend($.fn.validate
Box.defaults.rules,{
equals: {
validator:
function(value,param){
return value == $(param[
0]).val();
},message:
'Field do not match.'
}
});
验证规则
- email: 验证邮箱格式
- url: 验证url格式
- length[0,100]: 长度验证
- remote[‘http://…/action.do‘,’paramName’]: 发送一个ajax进行验证，返回’true’表示成功
To custom validate rule,override $.fn.validateBox.defaults.rules that defines a validator function and invalid message. For example,to define a minLength valid type:
自定义验证规则，需要重写$.fn.validateBox.defaults.rules来自定义验证规则和提示消息，如下是一个验证最小长度的示例。
$.extend($.fn.validate
Box.defaults.rules,{
minLength: {
validator:
return value.length >= param[0];
},0); Box-sizing: border-Box;">'Please enter at least {0} characters.'
}
});
现在就可以使用minLength来验证输入框的输入最少为5个字符
1
"validType:'minLength[5]'">
其他信息参考EasyUI官网
EasyUI官网
下面给出一个服务器端验证用户名是否被注册的示例
服务器端验证代码
如果用户名是”刘德华”就验证不通过，其它的验证通过
1
2
3
4
5
6
7
8
9
10
11
12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
@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;
}
return isOk+
"";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
$.extend($.fn.validate
Box.defaults.rules,{
myvalidate : {
validator :
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 : (data) {
haha = data;
}
});
console.log(haha);
return haha.indexOf("true");
},message : '用户名已经被占用'
}
});
验证时机
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
function submitForm() {
$('#ff').form('submit',{
onSubmit : () {
return $(this).form('enableValidation').form('validate');
},success:(data){
if (data.success == 'false') {
$.messager.alert('提示',data.msg,'info');
}else{
location.href = 'world.html';
}
}
});
}
function clearForm'clear');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
div style="padding: 10px 60px 20px 60px">
form "ff" "easyui-form" method="get" action="world.html">
table cellpadding=
"5">
tr>
td>Name:
</td>
td>
"username" "easyui-textBox" "text" Box-sizing: border-Box; color: rgb(102,validType:'myvalidate'">
input>
td>
tr>
td>Email:
"email" Box-sizing: border-Box; color: rgb(102,validType:'email'">
tr>
table>
form>
"text-align: center; padding: 5px">
a href=
"javascript:void(0)" "easyui-linkbutton" onclick=
"submitForm()">Submit
a>
"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 -->
效果图
