extjs4 表单验证自定义
extjs4 在验证上面支持的也特别好,他可以使用自带的格式验证,也可以自定义验证
比如:正则验证,密码重复填写对比验证,以及 调用后台方法验证,下面将验证方法统一写出以供参考
function loginNameValidator(value, userId){
/********** 登录名唯一验证 **********/
var flag = true;
var parameters = {
"loginUser.userName": value,
"loginUser.userId": userId
}
Ext.Ajax.request({
url: "dosomething",
method: "post",
params: parameters,
async: false,//必须为同步
success: function(response, config){//message:true 验证成功,message:false 验证失败
var resultJson = Ext.JSON.decode(response.responseText);
flag = resultJson.message;
console.log(flag);
}
});
return flag;
}
Ext.onReady(function() {
var insertUserForm = Ext.create('Ext.form.Panel', {
bodyPadding : 5,
width : 400,
height: 300,
url : 'javaScript:void(0)',
bodyPadding: 20,
layout : 'anchor',
buttonAlign : 'center',
defaultType : 'textfield',
renderTo: Ext.getBody(),
defaults: {
anchor: '100%'
},
items : [
{
fieldLabel : '登录名',
labelWidth: 60,
name : 'userName',
allowBlank : false,
blankText : "登录名不能为空",
regex: /^[A-Za-z0-9]{3,12}$/,
regexText: "只能为3-12的位字母或数字",
validateOnChange: false, //失去焦点时才进行验证
validator: function(value){
var userIdField = Ext.get("userId");
if(userIdField != null){
var userId = userIdField.getValue();
var result = loginNameValidator(value,userId);
return result;
}
}
}, {
fieldLabel : '密 码',
labelWidth: 60,
name : 'password',
inputType: 'password',
allowBlank : false,
blankText : '密码不能为空',
regex : /^[\w@#]{4,15}$/,
regexText:"密码为4-15位的字母数字@#_等字符"
},{
fieldLabel : '确认密码',
labelWidth: 60,
inputType: 'password',
name : 'confirmPassword',
allowBlank : false,
validator: function(value){
var password = this.previousSibling().value;
if(value != password){
return '两次输入的密码不一致';
}else{
return true;
}
}
},{//userId 隐藏域
id: "userId",
//fieldLabel: "用户ID",
hidden: false,
name: "userId"
}],
buttons : [{
text : '重置',
handler : function() {
this.up('form').getForm().reset();
}
}, {
text : '保存',
formBind : true,
disabled : true,
handler : function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit( {
success : function(form, action) {
Ext.Msg.alert('保存成功', action.result.msg);
},
failure : function(form, action) {
Ext.Msg.alert('操作失败', action.result.msg);
}
});
}
}
}]
});
});
extjs4 表单验证自定义的更多相关文章
- atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证
atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表 ...
- jQuery Validate 表单验证插件----自定义一个验证方法
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- easyui 表单验证validatetype——支持自定义验证
easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下: 代码 Code highlighting produced by Actipro C ...
- layui 自定义表单验证的几个实例
*注:使用本方法请先引入layui依赖的layu.js和layui.css 1.html <input type="text" name="costbudget&q ...
- python26:自定义form表单验证
一.自定义Form的原理 1.1 各种form表单验证比较 只有python提供了form表单验证,其他的都没有提供.django提供的功能还不够强大.最强大的是微软的ASP.NET!我们可以自己写一 ...
- jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)
1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({o ...
- element自定义表单验证
element-ui框架下修改密码弹窗进行表单验证. 除了基础校验,密码不为空,长度不小于6字符,需求中还需校验密码由数字和字母组合. 处理代码如下: <el-dialog :visible.s ...
- ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
一.关于导航怎么设置路由 1.在el-menu这个标签的属性中添加 router ,官方文档的解释是:启用vue-router 这种模式 2.在el-menu-item标签中的index属性直接书写路 ...
随机推荐
- c++学习书籍推荐《数据结构C++语言描述:应用标准模板库STL(第2版)》下载
本书是Ford和Topp两位教授于1996看出版的名著Data Structures with C++的第2版,在全球范围内已经有数以万计的学生从中受益.作者将C++语言作为算法描述语言,应用包含规范 ...
- Gin 框架 - 安装和路由配置
目录 概述 Gin 安装 路由配置 推荐阅读 概述 看下 Gin 框架的官方介绍: Gin 是一个用 Go (Golang) 编写的 web 框架. 它是一个类似于 martini 但拥有更好性能的 ...
- 【dfs基础讲解及例题】
定义 DFS(Depth-First-Search)深度优先搜索算法,是搜索算法的一种. 接下来因为懒得去找大段大段深奥的材料 所以就是一些个人的理解. 所谓深搜,是相对于广搜(只是第一篇)来说的.深 ...
- 在eclipse中利用正则表达式查找替换
众所周知,eclipse是可以用正则表达式来进行查找的,那么怎么利用正则表达式进行替换呢? 方法也很简单,就是在Replace with: 里面输入$来代表捕获型括号的匹配结果,$1为第一个匹配结果, ...
- python 3.5学习笔记(第五章)
本章内容 1.什么是模块 2.模块的导入方法 3.搜索路径 4.重要标准库 一.什么是模块 1.模块本质上是一个以.py 结尾的python文件,包含了python对象定义和python语句. 2.模 ...
- dijkstra算法学习笔记
dijkstra是一种单源最短路径算法,即求一个点到其他点的最短路.不能处理负边权. 最近某种广为人知的算法频繁被卡,让dijkstra逐渐成为了主流,甚至在初赛中鞭尸了SPFA(? dijkstra ...
- 个人永久性免费-Excel催化剂功能第92波-地理地址与经纬度互转功能
GPS设备和手机LBS的兴起,在地理信息存储过程中,在程序.应用级别是需要用经纬度去定位,而在数据分析的级别,特别是省市区镇街的分析,用到的是人可识别的文本类型存储,从设备中采集下来的数据和人工维护的 ...
- Spring+SpringMVC+mybatis maven pom文件
pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...
- [leetcode] 67. Add Binary (easy)
原题链接 思路: 用一个数保存进制,从后往前不断pop出两个数字和进制数相加,放入返回值中. var addBinary = function(a, b) { var arrA = a.split(' ...
- [系列] Gin框架 - 数据绑定和验证
目录 概述 推荐阅读 概述 上篇文章分享了 Gin 框架使用 Logrus 进行日志记录,这篇文章分享 Gin 框架的数据绑定与验证. 有读者咨询我一个问题,如何让框架的运行日志不输出控制台? 解决方 ...