jQuery EasyUI自定义validatebox

jQuery EasyUI自定义validatebox 发表于53分钟前(2013-10-18 11:45) ,
已有4次阅读，共0个评论

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

2 使用方法

使用方法

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

<form name="_validate" >
    <label>用户名：</label><input missingMessage="请输入用户名." validType="name"  required="true" /><br/>
    <label>密   码：</label><input type="password" 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’)进行验证。

[html] view plain copy print ?

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

<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 后台用户名验证代码

[java] view plain copy print ?

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();
}
}
}

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。

声明：OSCHINA 博客文章版权属于作者，受法律保护。未经作者同意不得转载。http://www.jeasyui.net/tutorial/65.html

本文链接地址: jQuery EasyUI自定义validateboxhttp://www.hongyanliren.com/2015m05/33450.html

红颜丽人

追求技术就像追求#$！不抛弃，不放弃！

jQuery EasyUI自定义validatebox

相关文章