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驗證

<input id="vv">

$('#vv').validatebox({
required: true,
validType: 'email'
});

第3種用法自定義驗證規則

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" 
required="required" validType="equals['#pwd']">

檢查兩次輸入的密碼是否一致

// extend the 'equals' rule
$.extend($.fn.validatebox.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.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官網
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 -->

效果圖