jQuery EasyUI提交表单验证


Posted in Javascript onJuly 19, 2016

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.' 
} 
});

jQuery EasyUI提交表单验证

调用 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 EasyUI提交表单验证

Javascript 相关文章推荐
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
elementUI select组件使用及注意事项详解
May 29 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 #Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 #Javascript
JS动态给对象添加事件的简单方法
Jul 19 #Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 #Javascript
Bootstrap表单布局
Jul 19 #Javascript
一次$.getJSON不执行的简单记录
Jul 19 #Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 #Javascript
You might like
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
python字符串对其居中显示的方法
2015/07/11 Python
Python在线运行代码助手
2016/07/15 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
商务专员岗位职责
2013/11/23 职场文书
计算机专业推荐信范文
2013/11/27 职场文书
个人优缺点自我评价
2014/01/27 职场文书
高中生的自我评价
2014/03/04 职场文书
感恩之星事迹材料
2014/05/03 职场文书
无犯罪记录证明
2014/09/19 职场文书
群众路线专项整治方案
2014/10/27 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
JS的深浅复制详细
2021/10/16 Javascript
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫