当我们开发一个管理类项目的时候，EasyUI是我常用的一个jquery框架，而表单验证显然是我们必须要实现的功能，而使用基于EasyUI的验证功能就比较简便了，本文来介绍下具体的用法

EasyUI表单验证

1.官方提供的验证

验证规则是通过使用 required 和 validType 属性来定义的。

规则	说明
email	匹配 email 正则表达式规则
url	匹配 URL 正则表达式规则
length[0,100]	允许从 x 到 y 个字符

<tr><td>Name:</td><td><input class="easyui-textbox" type="text" name="name" data-options="required:true,validType:'length[2,5]'"></input></td>
</tr>
<tr><td>Email:</td><td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
</tr>
<tr><td>url:</td><td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'url'"></input></td>
</tr>

2.自定义验证

官方所提供的验证类型就那么几种并不能满足我们所有的验证需求，所以此时我们需要自定义验证规则。重写 $.fn.validatebox.defaults.rules，来定义一个验证函数和无效的信息,实现如下:

 <tr><td>手机号码:</td><td><input class="easyui-textbox" type="text" name="subject" data-options="required:true" validType='phoneNum' ></input></td>
</tr>
<tr><td>密码:</td><td><input class="easyui-textbox" type="text" id="pwd" name="pwd" data-options="required:true"></input></td>
</tr>
<tr><td>确认密码:</td><td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"  validType="equals['#pwd']"></input></td>
</tr>

 <script type="text/javascript">$(function(){$.extend($.fn.validatebox.defaults.rules, {phoneNum: { //验证手机号validator: function(value, param){return /^1[3-8]+\d{9}$/.test(value);},message: '请输入正确的手机号码。'},equals: {validator: function(value,param){return value == $(param[0]).val();},message: '密码不一致.'}});})</script>

3.远程验证

有些时候我们需要同服务器交互验证，此时easyUI验证也提供的有此功能，remote[‘http://…/action.do’,‘paramName’]：发送 ajax 请求来验证值，成功时返回 ‘true’ 。实现如下。

<input class="easyui-textbox" name="username"style="width:100%" data-options="label:'账号:',required:true,invalidMessage:'账号已存在！'" validType="remote['/sys/user/validateUserName', 'username']">

服务端返回true表示验证通过false表示验证出错，可以通过invalidMessage属性来自定义验证出错时的提示信息。

好了~到此基于EasyUI的验证就到此结束了通过这几种方式应该可以满足各种客户端验证的需求了。

EasyUI之表单验证相关推荐

JaveWeb 公司项目（4）----- Easyui的表单验证
前面三篇博文讲述的是界面的搭建和数据的传输,可以看出目前我做的这个小项目已经有了一个大体的雏形,剩下的就是细节部分的打磨和一些友好的人机交互设计,今天做的是表单的验证,作为初学者,着实花了一番功夫,所 ...
BOS项目(SSH)04_02_修改密码功能-easyui的表单验证、表单检验 easyUI实现表单验证、如果加密的密码忘记了怎么办
系列文章目录文章目录系列文章目录前言修改密码功能-easyui的表单检验如果加密的密码忘记了怎么办总结前言这些是easyUI帮我们做好的,我们只需要在easyUI里面声明好一些属性即可 ...
atitit.表单验证的dsl 本质跟 easyui ligerui比较
atitit.表单验证的dsl 本质跟 easyui ligerui比较 1. DSL 声明验证 1 2. 自定义规则 1 3. 正则表达式验证,可以扩展实现 2 4. 犯错误消息提示,generic ...
php jq 提交表单验证,jQuery EasyUI 表单 – 表单验证 | 菜鸟教程
jQuery EasyUI 表单 - 表单验证本教程将向您展示如何验证一个表单.easyui 框架提供一个 validatebox 插件来验证一个表单.在本教程中,我们将创建一个联系表单,并应用 v ...
jquery 实现表单验证功能代码(简洁)
html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title&g ...
jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
【JavaLearn】（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
目录 1. jQuery定义和特点 1.1 jQuery 入门 1.2 jQuery对象和DOM对象 2. jQuery 选择器 2.1 基本选择器 2.2 属性选择器 2.3 位置选择器 2.4 表 ...
【JavaLearn】#（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
1. jQuery定义和特点 1.1 jQuery 入门对 JavaScript 进行了封装,降低了使用JavaScript的难度,可以大幅提高开发效率(Write less, do more) j ...
vue 表单验证正则_vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...

EasyUI之表单验证

EasyUI表单验证

1.官方提供的验证

2.自定义验证

3.远程验证

EasyUI之表单验证相关推荐

最新文章

热门文章