easyUI自定义validatebox.

1 自定义validatebox验证，验证用户名，密码。

2 使用方法

   
   
   
   

    
    
    
    
    使用方法 
    
    
    
    <
    
    
    
    form 
    
    
    
    name
    
    
    
    ="_validate"
    
    
    
     
    
    
    
    >
    
    
    
     
    
    
    
    <
    
    
    
    label
    
    
    
    >
    
    
    
    用户名：
    
    
    
    </
    
    
    
    label
    
    
    
    ><
    
    
    
    input 
    
    
    
    class
    
    
    
    ="easyui-validatebox"
    
    
    
     missingMessage
    
    
    
    ="请输入用户名."
    
    
    
     validType
    
    
    
    ="name"
    
    
    
     required
    
    
    
    ="true"
    
    
    
     
    
    
    
    /><
    
    
    
    br
    
    
    
    />
    
    
    
     
    
    
    
    <
    
    
    
    label
    
    
    
    >
    
    
    
    密
    
    
    
    &nbsp;&nbsp;&nbsp;
    
    
    
    码：
    
    
    
    </
    
    
    
    label
    
    
    
    ><
    
    
    
    input 
    
    
    
    type
    
    
    
    ="password"
    
    
    
     class
    
    
    
    ="easyui-validatebox"
    
    
    
     missingMessage
    
    
    
    ="请输入密码."
    
    
    
     validType
    
    
    
    ="pwd[6,8]"
    
    
    
     required
    
    
    
    ="true"
    
    
    
     
    
    
    
    /><
    
    
    
    br
    
    
    
    />
    
    
    
     
    
    
    
    </
    
    
    
    form
    
    
    
    >
    
    
    
     
    
    
    
    <
    
    
    
    button 
    
    
    
    onclick
    
    
    
    ="go()"
    
    
    
    >
    
    
    
    提交
    
    
    
    </
    
    
    
    button
    
    
    
    >
   
   
   
   

3 javascript 定义验证规则

自定义规则，重载$.fn.validatebox.defaults.

name：验证用户名是否存在。

pwd：验证密码，长度在6-8位之间。

注意：为了防止表单提交时无效，当用户点击提交按钮的形式，我们应该防止的形式提交的表格无效。加上$('_validate').form('validate')进行验证。

   
   
   
   

    
    
    
    
    <
    
    
    
    script 
    
    
    
    type
    
    
    
    ="text/javascript"
    
    
    
    >
    
    
    
     $(document).ready(
    
    
    
    function
    
    
    
    (){ 
    
    
    
    //
    
    
    
    自定义validatebox的验证方法
    
    
    
     
    
    
    
     $.extend($.fn.validatebox.defaults.rules, { name: { validator: 
    
    
    
    function
    
    
    
    (value){ 
    
    
    
    var
    
    
    
     flag; $.ajax({ type: 
    
    
    
    '
    
    
    
    POST
    
    
    
    '
    
    
    
    , url: 
    
    
    
    '
    
    
    
    <c:url value="/ValidateBox/ValidName.do"/>
    
    
    
    '
    
    
    
    , data:
    
    
    
    '
    
    
    
    name=
    
    
    
    '
    
    
    
    +
    
    
    
    value, async:
    
    
    
    false
    
    
    
    , success: 
    
    
    
    function
    
    
    
    (data) { 
    
    
    
    if
    
    
    
    (data
    
    
    
    ==
    
    
    
    '
    
    
    
    success
    
    
    
    '
    
    
    
    ) { flag 
    
    
    
    =
    
    
    
     
    
    
    
    true
    
    
    
    ; }
    
    
    
    else
    
    
    
    { flag 
    
    
    
    =
    
    
    
     
    
    
    
    false
    
    
    
    ; } } }); 
    
    
    
    return
    
    
    
     flag; }, message: 
    
    
    
    '
    
    
    
    您输入的用户名已存在，请更换。
    
    
    
    '
    
    
    
     }, pwd: { validator: 
    
    
    
    function
    
    
    
    (value,param){ 
    
    
    
    return
    
    
    
     value.length
    
    
    
    >=
    
    
    
    param[
    
    
    
    0
    
    
    
    ] 
    
    
    
    &&
    
    
    
     value.length
    
    
    
    <=
    
    
    
    param[
    
    
    
    1
    
    
    
    ]; }, message: 
    
    
    
    '
    
    
    
    密码长度在{0}-{1}之间。
    
    
    
    '
    
    
    
     } }); }); 
    
    
    
    function
    
    
    
     go() { 
    
    
    
    if
    
    
    
    ($(
    
    
    
    '
    
    
    
    _validate
    
    
    
    '
    
    
    
    ).form(
    
    
    
    '
    
    
    
    validate
    
    
    
    '
    
    
    
    )) { alert(
    
    
    
    11
    
    
    
    ); } } 
    
    
    
    </
    
    
    
    script
    
    
    
    >
   
   
   
   

4 后台用户名验证代码

   
   
   
   

    
    
    
    
    package
    
    
    
     cn.zyc.validatebox; 
    
    
    
    import
    
    
    
     java.io.IOException; 
    
    
    
    import
    
    
    
     java.io.PrintWriter; 
    
    
    
    import
    
    
    
     java.util.ArrayList; 
    
    
    
    import
    
    
    
     java.util.List; 
    
    
    
    import
    
    
    
     javax.servlet.http.HttpServletResponse; 
    
    
    
    import
    
    
    
     org.springframework.stereotype.Controller; 
    
    
    
    import
    
    
    
     org.springframework.web.bind.annotation.RequestMapping; @Controller(value 
    
    
    
    =
    
    
    
     
    
    
    
    "
    
    
    
    validateBoxController
    
    
    
    "
    
    
    
    ) @RequestMapping(
    
    
    
    "
    
    
    
    /ValidateBox
    
    
    
    "
    
    
    
    ) 
    
    
    
    public
    
    
    
     
    
    
    
    class
    
    
    
     ValidateBoxController { 
    
    
    
    /**
    
    
    
     * 验证用户名是否存在 
    
    
    
    */
    
    
    
     @RequestMapping(value 
    
    
    
    =
    
    
    
     
    
    
    
    "
    
    
    
    /ValidName.do
    
    
    
    "
    
    
    
    ) 
    
    
    
    public
    
    
    
     
    
    
    
    void
    
    
    
     validName(String name, HttpServletResponse response) 
    
    
    
    throws
    
    
    
     Exception { List
    
    
    
    <
    
    
    
    String
    
    
    
    >
    
    
    
     names 
    
    
    
    =
    
    
    
     
    
    
    
    new
    
    
    
     ArrayList
    
    
    
    <
    
    
    
    String
    
    
    
    >
    
    
    
    (); names.add(
    
    
    
    "
    
    
    
    wade
    
    
    
    "
    
    
    
    ); names.add(
    
    
    
    "
    
    
    
    james
    
    
    
    "
    
    
    
    ); names.add(
    
    
    
    "
    
    
    
    kobe
    
    
    
    "
    
    
    
    ); 
    
    
    
    try
    
    
    
     { 
    
    
    
    if
    
    
    
    (names.contains(name)) { writer(response, 
    
    
    
    "
    
    
    
    failure
    
    
    
    "
    
    
    
    ); }
    
    
    
    else
    
    
    
    { writer(response, 
    
    
    
    "
    
    
    
    success
    
    
    
    "
    
    
    
    ); } } 
    
    
    
    catch
    
    
    
     (Exception e) { writer(response, 
    
    
    
    "
    
    
    
    error
    
    
    
    "
    
    
    
    ); } } 
    
    
    
    private
    
    
    
     
    
    
    
    static
    
    
    
     
    
    
    
    void
    
    
    
     writer(HttpServletResponse response,String str){ 
    
    
    
    try
    
    
    
     { 
    
    
    
    //
    
    
    
    设置页面不缓存
    
    
    
     
    
    
    
     response.setHeader(
    
    
    
    "
    
    
    
    Pragma
    
    
    
    "
    
    
    
    , 
    
    
    
    "
    
    
    
    No-cache
    
    
    
    "
    
    
    
    ); response.setHeader(
    
    
    
    "
    
    
    
    Cache-Control
    
    
    
    "
    
    
    
    , 
    
    
    
    "
    
    
    
    no-cache
    
    
    
    "
    
    
    
    ); response.setCharacterEncoding(
    
    
    
    "
    
    
    
    UTF-8
    
    
    
    "
    
    
    
    ); response.setContentType(
    
    
    
    "
    
    
    
    text/html
    
    
    
    "
    
    
    
    ); PrintWriter out
    
    
    
    =
    
    
    
     
    
    
    
    null
    
    
    
    ; out 
    
    
    
    =
    
    
    
     response.getWriter(); out.print(str); out.flush(); out.close(); } 
    
    
    
    catch
    
    
    
     (IOException e) { e.printStackTrace(); } } }
   
   
   
   

5 validatebox属性及方法

属性

名称	类型	描述	默认值
required（必填）	boolean（布尔型）	定义表单域必须填写。	false
validType（验证类型）	string（字符串）	定义表单域的验证类型，比如：email, url等。	null
missingMessage（未填提示）	string（字符串）	当表单域未填写时出现的提示信息。	This field is required.
invalidMessage（无效提示）	string（字符串）	当表单域的内容被验证为无效时出现的提示。	null

方法

名称	参数	描述
destroy	none	移除并注销组件。
validate	none	验证表单域的内容是否有效。
isValid	none	调用validate方法并且返回验证结果，true或者false。