ExtJs FormPanel 空应验
日期：2014-05-16 浏览次数：20314 次
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>空验证</title> <link href="ext/resources/css/ext-all.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> <script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { //进行验证的时候，必须需要以下的两句话，否则就不会显示红色感叹号和鼠标移动到感叹号上，不会有提示信息 Ext.QuickTips.init();//支持tips提示 Ext.form.Field.prototype.msgTarget = 'side'; //Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚举值为"qtip","title","under","side",id(元素id) var form1 = new Ext.form.FormPanel({ width : 350, frame : true, renderTo : "form1", labelWidth : 80, title : "FormPanel", bodyStyle : "padding:5px 5px 0", defaults : { width : 150, xtype : "textfield", inputType : "password" }, items : [ { fieldLabel : "不能为空", allowBlank : false,//不允许为空 blankText : "不能为空，请填写",//错误提示信息，默认为This field is required! id : "blanktest", anchor : "80%" } ] }); }); </script> </head> <body> <div id="form1"></div> </body> </html>
?
?
下面两句在验证中很重要
//进行验证的时候，必须需要以下的两句话，否则就不会显示红色感叹号和鼠标移动到感叹号上，不会有提示信息 Ext.QuickTips.init();//支持tips提示 Ext.form.Field.prototype.msgTarget = 'side'; //Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚举值为"qtip","title","under","side",id(元素id)
?
?下面的效果
?Ext.form.Field.prototype.msgTarget为qtip的时候
这时候的鼠标放在上面显示
?
?
?Ext.form.Field.prototype.msgTarget为title的时候
?
?
?Ext.form.Field.prototype.msgTarget为under的时候
?
?Ext.form.Field.prototype.msgTarget为id的时候
这个需要修改一些代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>空验证</title> <link href="ext/resources/css/ext-all.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> <script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { //进行验证的时候，必须需要以下的两句话，否则就不会显示红色感叹号和鼠标移动到感叹号上，不会有提示信息 Ext.QuickTips.init();//支持tips提示 Ext.form.Field.prototype.msgTarget = 'name'; //Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚举值为"qtip","title","under","side",id(元素id) var form1 = new Ext.form.FormPanel({ width : 350, frame : true, renderTo : "form1", labelWidth : 80, x : 650, y : 200, floating : true, title : "FormPanel", bodyStyle : "padding:5px 5px 0", defaults : { width : 150, xtype : "textfield", inputType : "password" }, items : [ { fieldLabel : "不能为空", allowBlank : false,//不允许为空 blankText : "不能为空，请填写",//错误提示信息，默认为This field is required! id : "blanktest", anchor : "80%" } ] }); }); </script> </head> <body> <div id="form1"></div> <div id="name" style="width: 100px; margin-top: 300px; margin-left: 650px;"></div> </body> </html>
?
?
效果
?
?vtype格式验证
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:/
