grid

grid
  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  78 Posts :: 0 Stories :: 62 Comments :: 0 Trackbacks
jQuery MiniUI 开发教程 表单控件 表单：数据验证（三）
表单验证
                
            
           

参考示例：
                验证规则    
                表单验证    
                表单验证：文本提示    
                表单验证：组合验证                    
          

           

绑定validation事件

<input id="username" name="username" onvalidation="onUserNameValidation" class="mini-textbox" required="true" /> 
function onUserNameValidation(e) {
    if (e.isValid) {
        if (isEmail(e.value) == false) {
            e.errorText = "必须输入邮件地址";
            e.isValid = false;
        }
    }
}
validation事件是实现验证的基础。
           

设置vtype   

<input class="mini-textbox" vtype="email"/>          

TextBox内置了vtype属性，有如下验证规则：email、url、int、float、maxLength、minLength、rangeLength、rangeChar、range、date等。
        
           

验证表单

var form = new mini.Form("#form1");
form.validate();
if(form.isValid()){
    alert("验证成功");
}
posted on 2012-09-28 16:35 nikofan 阅读(6687) 评论(3)  编辑  收藏

Feedback

# re: jQuery MiniUI 开发教程 表单控件 表单：数据验证（三）[未登录] 2013-04-07 21:22 天狼
请问能AJAX表单验证吗？  回复  更多评论
  

# re: jQuery MiniUI 开发教程 表单控件 表单：数据验证（三）[未登录] 2013-04-07 21:30 天狼
我使用了两种方式AJAX验证，都不行
第一种:
HTML代码：
onvalidation="onGradeNameUniqueValidation"
JS代码：
function onGradeNameUniqueValidation(e) {
if (e.isValid) {
$.post(
'../grade/checkGradeNameUnique.action',
{gradeName:e.value},
function(data) {
if (data == 'true') {
e.errorText = "年级名称已经存在";
e.isValid = false;
}
}
);
}
}
第二种：
HTML代码：
vtype="remote"
JS代码：
/*自定义vtype*/
mini.VTypes["remoteErrorText"] = "年级名称已经存在";
mini.VTypes["remote"] = function (v) {
$.ajax({
async:false,
url:'../grade/checkGradeNameUnique.action',
data:{gradeName:v},
success:function(data) {
return data;
}
});
}
其中第一种验证，AJAX请求发送了，但文本框后不提示。
而第二种验证，AJAX请求也发送了，但文本框后的提示一直不消失。
我的猜想是AJAX异步的原因，不知道真正的问题在哪里？  回复  更多评论
  

# re: jQuery MiniUI 开发教程 表单控件 表单：数据验证（三）[未登录] 2014-01-22 15:53 f
fg  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: