jQuery EasyUI提交表单验证

 更新时间:2016年07月19日 10:25:10   作者:老张的菠菜  
这篇文章主要介绍了jQuery EasyUI提交表单验证的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

EasyUI的form表单里面的验证框,先讲解下validatebox类和相关的属性。

验证规则

验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则:

email:匹配 email 正则表达式规则,系统提供的属性。

url:匹配 URL 正则表达式规则

length[0,100]:允许从 x 到 y 个字符

remote['http://.../action.do','paramName']:发送 ajax 请求来验证值,成功时返回 'true' 。

要自定义验证规则,重写 $.fn.validatebox.defaults.rules ,来定义一个验证函数和无效的信息。例如,定义一个 minLength 验证类型:

$.extend($.fn.validatebox.defaults.rules, { 
minLength: { 
validator: function(value, param){ 
return value.length >= param[0]; 
}, 
message: 'Please enter at least {0} characters.' 
} 
}); 

调用 validate 方法并且返回验证结果,true 或者 false。

<div id="userReg" class="easyui-panel" style="width:400px; height:300px;" title="注册用户"> 
<form action="" method="post"> 
<table> 
<tr> 
<td>用户名:</td> 
<td><input type="text" name="username" class="easyui-validatebox" required=true 
validType="midLength[4,10]" value=""/></td> 
</tr> 
<tr> 
<td>密码:</td> 
<td><input type="text" name="password" class="easyui-validatebox" required=true validType="pwdLength[8]" value=""/></td> 
</tr> 
<tr> 
<td>性别:</td> 
<td> 
<input type="radio" name="sex" checked="checked" value="male"/>男 
<input type="radio" name="sex" value="female"/>女 
</td> 
</tr> 
<tr> 
<td>年龄:</td> 
<td><input type="text" name="age" value=""/></td> 
</tr> 
<tr> 
<td>出生日期:</td> 
<td><input type="text" name="birth" value=""/></td> 
</tr> 
<tr> 
<td>所属城市:</td> 
<td><input type="text" name="city" value=""/></td> 
</tr> 
<tr> 
<td>薪水:</td> 
<td><input type="text" name="salary" value=""/></td> 
</tr> 
<tr> 
<td colspan="2"> 
<a class="easyui-linkbutton">保存</a> 
</td> 
</tr> 
</table> 
</form> 
</div> 
<script type="text/javascript"> 
$(function(){ 
$.extend($.fn.validatebox.defaults.rules,{ 
midLength:{ 
validator:function(value, param){ 
return value.length >= param[0] && value.length<=param[1]; 
}, 
message: '用户名必须在4到10位之间!' 
}, 
pwdLength:{ 
validator:function(value,param){ 
return value.length==param[0]; 
}, 
message:'密码必须是8位' 
} 
}); 
}); 
</script> 

参考图片如下:

相关文章

  • 基于JQuery实现CheckBox全选全不选

    基于JQuery实现CheckBox全选全不选

    做项目时需要实现CheckBox的全选,我想用JQuery实现,从网上找了找,网上的确有很多例子,但都不能实现我想要的全部效果
    2011-06-06
  • jQuery往返城市和日期查询实例讲解

    jQuery往返城市和日期查询实例讲解

    本文讲解如何使用jQuery实现城市查询和日历显示的整个流程,需要的朋友可以参考下
    2015-10-10
  • jquery zTree异步加载简单实例分享

    jquery zTree异步加载简单实例分享

    Ztree是一个使用jQuery实现的JSP页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式,感兴趣的朋友可以了解下,或许对你学习ztree有所帮助
    2013-02-02
  • jQuery实现购物车全功能

    jQuery实现购物车全功能

    这篇文章主要为大家详细介绍了jQuery实现购物车全功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • jquery.gridrotator实现响应式图片展示画廊效果

    jquery.gridrotator实现响应式图片展示画廊效果

    本教程将教大家制作一个jQuery响应式图片展示画廊效果,所有图片以网格的形式排列,然后定时随机翻转其中某些格子用来切换图片。这种效果可以用来当做背景或装饰放在我们的网站上。
    2015-06-06
  • jQuery oLoader实现的加载图片和页面效果

    jQuery oLoader实现的加载图片和页面效果

    我们使用jQuery的ajax在页面中就像使用iframe一样加载其他页面内容,今天我给大家分享一个名叫jQuery oLoader的插件,该插件还集成了oPageLoader,可以轻松实现加载图片和页面的漂亮效果。
    2015-03-03
  • jquery 页面全选框实践代码

    jquery 页面全选框实践代码

    页面中经常遇到与全选相关的操作,利用jquery集成了一下,主要为了方便使用吧~
    2010-04-04
  • jQuery中:checkbox选择器用法实例

    jQuery中:checkbox选择器用法实例

    这篇文章主要介绍了jQuery中:checkbox选择器用法,实例分析了:checkbox选择器的功能、定义及匹配复选框的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jquery中toggle函数交替使用问题

    jquery中toggle函数交替使用问题

    jQuery 的toggle()函数使用show()或hide()函数来切换HTML元素的可见状态。今天我们来探讨下jquery中toggle函数交替使用问题
    2015-06-06
  • jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例

    jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例

    本文为大家介绍下jQuery+JSON+jPlayer实现QQ空间音乐查询,具体的实现过程感兴趣的朋友可以了解下哈,希望对大家有所帮助
    2013-06-06

最新评论