【EasyUI篇】ValidateBox验证框组件
程序员文章站
2024-02-04 21:15:46
...
微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;
查看--> 全套EasyUI示例目录
19.ValidateBox验证框组件
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ValidateBox</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ValidateBox.js"></script>
<style rel="stylesheet" type="text/css">
</style>
<script>
</script>
</head>
<body style="padding: 100px;">
<%--class加载方式--%>
<%--<input id="email" class="easyui-validatebox"
data-options="required:true,validType:'email'">--%>
验证框：<input id="email">
</body>
</html>
JS文件
$(function () {
$('#email').validatebox({
// required:true,
// validType:'email',
// validType:'length[2,10]',
// validType:'url',
//设置同时多种验证
// validType:['email','length[6,15]'],
validType:'minLength[5]',
//当服务器返回true的时候，表示验证成功
// validType:"remote['validateEmail.action','username']",
//延迟多久验证
delay:200,
// missingMessage:'必填项',
// invalidMessage:'请输入有效的电子邮箱地址',
tipPosition:'right',// left right top bottom
deltaX:0,
//为true关闭验证
novalidate:false,
});
console.log($('#email').validatebox('options'));
//禁用验证
$('#email').validatebox('disableValidation');
//启用验证
$('#email').validatebox('enableValidation');
$(document).click(function () {
//销毁验证框
// $('#email').validatebox('destroy');
// console.log($('#email').validatebox('validate'));
//返回验证结果
// alert($('#email').validatebox('isValid'));
});
//自定义验证规则
$.extend($.fn.validatebox.defaults.rules,{
minLength:{
validator:function (value,param) {
return value.length >= param[0];
},
message:'请输入长度不小于{0}的字符',
},
});
});
由于涉及到服务器远程校验，所以需要服务器端代码配合
Controller文件
@RequestMapping(value = "/validateEmail")
@ResponseBody
public String validateUsername(String username){
Map<String,String> msg = new HashMap<>();
if("ooyhao".equals(username)){
return "true";
}
return "false";
}
效果图
------------------------------------------------
关注小编微信公众号获取更多资源