Ext验证汇总

最新推荐文章于 2021-01-12 01:17:34 发布

原创最新推荐文章于 2021-01-12 01:17:34 发布 · 172 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #HTML

ExtJS 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何使用JavaScript进行输入验证，包括限制输入长度、限定输入内容类型（如仅限中文、字母、数字等），以及实时反馈剩余可输入字数。同时展示了日期与时间字段的配置方法。

1.验证输入框长度：一个汉字等于两个字符问题

validator：function(){
       var str = Ext.util.Format.trim(news.getValue());
       var size = 0;
       for(var i=0;i<str.length;i++){
          var code = str.charCodeAt(i);
          if(code > 255){
              size += 2;
          }else{
              size += 1;
          }
          if(size > 30){
              news.invalidText = '长度不能超过30！';
              news.focus();
              return false;
          }else{
              return true;
          }
       }

}

2.只能输入中文、字母、数字、英文逗号、英文句号！

regex:/^([\u0391-\uFFE5]|[a-zA-Z]|\d[-,._])*$/,

regexText: '只能输入中文、字母、数字、英文逗号、英文句号',

regex: /^([\u0391-\uFFE5]|[a-zA-Z]|\d|_)*$
regexText: 只能输入中文字母数字下划线

3.鼠标提醒还可以输入多少个字：

enableKeyEvents: true,

listeners:{

"keyup": function(cur,evt){

var curLen = cur.getValue().length;

if(curLen <= 500){

news.viewTi = '你还可以输入：'+(500-curLen)+'个字';

Ext.get('notic').dom.innerHTML = news.viewTi;

}else{

news.viewTi = '<font color="red" style="margin-right:-70px">字数超过范围请酌情删减</font>';

Ext.get('notic').dom.innerHTML = news.viewTi;

}

需在panel里面加上->html:<div id='notic' style='color:#0000FF;text-align:center;margin-left:-55px'</div>

var startDate = new Ext.form.DateField({
			id : 'startDate',
			style : 'margin-bottom: 5px;',
			fieldLabel : '开始日期',
			format : 'Y-m-d',
			allowBlank : false,
			blankText : '不能为空',
			editable : false,
			listeners:{"blur":function(){
				Ext.getCmp('endDate').setMinValue(Ext.get('startDate').getValue());
			}}
		});
var startTime = new Ext.form.TimeField({
			id : 'startTime',
			style : 'margin-bottom: 5px;',
			fieldLabel : '开始时间',
			allowBlank : false,
			editable : false,
			blankText : '不能为空',
			format : 'G:i'

		});
var endDate = new Ext.form.DateField({
			id : 'endTime1',
			style : 'margin-bottom: 5px;',
			fieldLabel : '结束日期',
			allowBlank : false,
			blankText : '不能为空',
			format : 'Y-m-d ',
			editable : false,
			listeners:{"blur":function(){
				Ext.getCmp('startDate').setMinValue(Ext.get('endDate').getValue());
			}}
		});
var endTime = new Ext.form.TimeField({
			id : 'endTime2',
			style : 'margin-bottom: 5px;',
			fieldLabel : '结束时间',
			allowBlank : false,
			blankText : '不能为空',
			editable : false,
			format : 'G:i'
		});

regex: /^([a-zA-Z]|\d|_)*$，
regex:‘只能输入数字字母下划线‘

regex : /^([\u0391-\uFFE5]|[ ]|[a-zA-Z]|\d|_)*$/,
regexText : '' 只能输入中文字母数字空格下划线“,

两次密码一致性检查：

{
        columnWidth : 0.5,
	layout : 'form',
	defaultType : 'textfield',
	items : [ {
	fieldLabel : '' + getResource('resourceParam870') + '',
	inputType : 'password',
	name : 'newpassword1',
	id : 'newpassword1',
	regex : /^([\u0391-\uFFE5]|[a-zA-Z]|\d|_)*$/,
	regexText : '' + getResource('resourceParam863') + '',
	width : 175,
	minLength : 1,
	maxLength : 20,
	allowBlank : false,
	value : 123456,
	anchor : '95%',
	listeners : {
	       'blur' : function() {
			if ("" != Ext.getCmp('newpassword2').getValue()) {
							Ext.getCmp('newpassword2').validate();
			}
	      }
       }} ]
},{
	columnWidth : 0.5,
	layout : 'form',
	defaultType : 'textfield',
	items : [ {
		fieldLabel : '' + getResource('resourceParam867') + '',
		inputType : 'password',
		name : 'newpassword2',
		id : 'newpassword2',
		regex : /^([\u0391-\uFFE5]|[a-zA-Z]|\d|_)*$/,
		regexText : '' + getResource('resourceParam863') + '',
		width : 175,
		minLength : 1,
		maxLength : 20,
		allowBlank : false,
		value : 123456,
		invalidText : '' + getResource('resourceParam871') + '',
		anchor : '95%',
		validator : function() {
				return (Ext.getCmp('newpassword2').getValue() ==
                                            Ext.getCmp('newpassword1').getValue());
                                  }
		} ]
}