【EasyUI篇】ValidateBox验证框组件

最新推荐文章于 2018-12-03 22:01:49 发布

ooyhao

最新推荐文章于 2018-12-03 22:01:49 发布

阅读量3.2k

点赞数

文章标签： EasyUI ValidateBox

本文链接：https://blog.csdn.net/ooyhao/article/details/82723504

版权

微信公众号：程序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";
}

效果图