【EasyUI篇】ValidateBox验证框组件

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

效果图

 

 

------------------------------------------------

关注小编微信公众号获取更多资源

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值