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

如何扩展加上ajax验证啊

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

重载一下验证规则:

		$.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\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i.test(value);
					} else {
						return true;
					}
				},
				message:'Please enter a valid URL.'
			}
		});

 

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

比如增加长度验证呢

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

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