论坛首页 Web前端技术论坛

jquery-easyui中的表单验证

浏览 24147 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-03-22  

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

   发表时间:2010-03-25  
如何扩展加上ajax验证啊
0 请登录后投票
   发表时间:2010-03-25   最后修改:2010-03-25
如果验证那里的规则是这样的 为空则不验证,不为空则验证,现在是不适合的,还要自己扩展规则。
但email,url,电话这种很多时候需求都是允许为空的。
所以能不能考虑当值为空的时候把required="false"考虑进去呢或者加个可选变量是否在值为空的情况下忽略掉validtype验证呢?
0 请登录后投票
   发表时间:2010-03-25  

重载一下验证规则:

		$.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.'
			}
		});
 
0 请登录后投票
   发表时间:2010-07-20  
1.验证可以在失去焦点后再触发吗??在得到焦点就马上显示有时候觉得没必要
2.输完后可以通知按enter提交吗??这个经常用到,没有这个很不方便
0 请登录后投票
   发表时间:2010-09-12  
比如增加长度验证呢
0 请登录后投票
   发表时间: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>

但是只要光标不离开这个域,会一直向后台发请求。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics