jquery-easyui中的表单验证

jQuery EasyUI中进行表单验证主要是通过validatebox插件，看一个例子：

<div style="background:#fafafa;padding:10px;width:300px;height:300px;">
    <form id="ff" method="post">
        <div>
            <label for="name">Name:</label>
            <input class="easyui-validatebox" type="text" name="name" required="true"></input>
        </div>
        <div>
            <label for="email">Email:</label>
            <input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
        </div>
        <div>
            <label for="subject">Subject:</label>
            <input class="easyui-validatebox" type="text" name="subject" required="true"></input>
        </div>
        <div>
            <label for="message">Message:</label>
            <textarea name="message" style="height:60px;"></textarea>
        </div>
        <div>
            <input type="submit" value="Submit">
        </div>
    </form>
</div>

这个表单对name,email,subject字段定义为必填字段，并且对email字段中的填写格式作了限制。

为了防止表单验证未通过时进行提交，必须：

$('#ff').form({
    url:'/demo7/ProcessServlet',
    onSubmit:function(){
        return $(this).form('validate');
    },
    success:function(data){
        alert(data);
    }
});

运行一下，看看效果：

 

原文及下载地址：http://jquery-easyui.wikidot.com/tutorial:form3

评论

9 楼 sdtm1016 2012-05-23  

对于 $(this).form('validate');
我在源码里并没有看到form对它进行过设置 ，只看到在ajaxSubmit(target,options)中有对它的调用
options.onSubmit.call(target)，能告诉下思路不？纠结了三天了

8 楼 jeffmacn 2011-03-21  

$.extend($.fn.validatebox.defaults.rules, {
    remote: {
        validator: function(value, param){
alert(value);
var result = false;
var url = param[0];
            $.post(url, function(data) {
                result = data;
            });
            return result;
        },
        message: '远程校验失败'
    }
});

<input name="idNumber" class="easyui-validatebox" required="true"
validateType="remote['${ctx}/validate.do?formValidateFieldName=idNumber']"></input>

但是只要光标不离开这个域，会一直向后台发请求。

7 楼 hhww0101 2010-09-12  

比如增加长度验证呢

6 楼 jiangyix 2010-07-20  

1.验证可以在失去焦点后再触发吗??在得到焦点就马上显示有时候觉得没必要
2.输完后可以通知按enter提交吗??这个经常用到,没有这个很不方便

5 楼 net205 2010-03-28  

收下了........

4 楼 stworthy 2010-03-25  

<p>重载一下验证规则:</p>
<pre name="code" class="js"> $.extend($.fn.validatebox.defaults.rules, {
email:{
validator:function(value,param){
if (value){
return /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/.test(value);
} else {
return true;
}
},
message:'Please enter a valid email address.'
},
url:{
validator:function(value,param){
if (value){
return /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&amp;#;`~=%!]*)(\.\w{2,})?)*\/?)/i.test(value);
} else {
return true;
}
},
message:'Please enter a valid URL.'
}
});
</pre>
 

3 楼 bnmcvzx 2010-03-25  

如果验证那里的规则是这样的 为空则不验证，不为空则验证，现在是不适合的，还要自己扩展规则。
但email，url，电话这种很多时候需求都是允许为空的。
所以能不能考虑当值为空的时候把required="false"考虑进去呢或者加个可选变量是否在值为空的情况下忽略掉validtype验证呢？

2 楼 yoohoo.lai 2010-03-25  

如何扩展加上ajax验证啊

1 楼 yuyue618 2010-03-25  

不错,我喜欢