Sencha表单验证

/**
 * @author Changweihua
 */
Ext.application({
    name:'Chapter5',
    launch:function(){
                             
       Ext.define('User', {
           extend:'Ext.data.Model',
           config:{
               fields:[
                'name','sex','password',{name:'age',type:'int'},'email','url','memo'
               ],
               validations:[
                   {type:'presence',field:'name',message:'必须输入用户名'},
                   {type:'exclusion',field:'name',list:['admin', '管理员'],message:'不能使用该用户名'},
                   {type:'inclusion',field:'sex',list:['male', 'female'],message:'必须选择姓名'},
                   {type:'presence',field:'password',message:'必须输入密码'},
                   {type:'length',field:'password',message:'必须输入6位以上的密码'},
                   {type:'length',field:'age',message:'必须输入有效的年龄'},
                   {type:'format',field:'age',matcher:/^\+?[1-9][0-9]$/,message:'必须输入有效的年龄'},
                   {type:'email',field:'email',message:'必须输入有效的邮件地址'},
                   {type:'format',field:'url',matcher:/^http:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/,message:'必须输入有效的网址'}
               ]
           }
       });
                            
       var formPanel = Ext.create('Ext.form.Panel', {
           id:'formPanel',
           scrollable:'vertical',
           items:[{
               xtype:'fieldset',
               title:'用户信息',
               instructions:'填写完整的用户信息',
               defaults:{
               },
               items:[{
                   xtype:'textfield',
                   label:'用户名',
                   name:'name',
                   clearIcon:true,
                   required:true,
                   placeHolder:'请输入用户名'
               },{
                   xtype:'fieldset',
                   title:'性别',
                   defaults:{
                       xtype:'radiofield'
                   },
                   items:[{
                       label:'男',
                       name:'sex',
                       checked:true,
                       value:'male'
                   },{
                       label:'女',
                       name:'sex',
                       value:'female'
                   }]
               },{
                   xtype:'passwordfield',
                   label:'密码',
                   name:'password',
                   clearIcon:true,
                   required:true,
                   placeHolder:'请输入密码'
               },{
                   xtype:'spinnerfield',
                   label:'年龄',
                   name:'age',
                   required:true,
                   stepValue:1,
                   minValue:18,
                   maxValue:30
               },{
                  xtype:'emailfield',
                  label:'邮箱',
                  name:'email',
                  placeHolder:'请输入有效的电子邮件地址'
               },{
                  xtype:'urlfield',
                  label:'个人网址',
                  placeHolder:'请输入有效的网址' ,
                  name:'url'
               },{
                  xtype:'textareafield',
                  label:'个人简介',
                  placeHolder:'请输入1000字以内的个人简介',
                  name:'memo'
               }]
           },{
               xtype:'panel',
               defaults:{
                   xtype:'button'
               },
               layout:{
                   type:'hbox',
                   pack:'end',
               },
               items:[{
                   text:'数据装载',
                   ui:'action',
                   handler:function(){
                       var user = Ext.create('User', {
                           'name':'changweihua',
                           'sex':'male',
                           'password':'password',
                           'age':23,
                           'email':'changweihua@outlook.com',
                           'url':'http://www.cmono.net',
                           'memo':'TTTTTT'
                       });
                       formPanel.setRecord(user);
                   }
               },{
                   text:'提交',
                   ui:'action',
                   handler:function(){
                       var user = Ext.create('User', formPanel.getValues());
                       var errors = user.validate();
                       if(errors.isValid()){
                                                
                       }else{
                           var msg = '';
                           Ext.each(errors.items, function(error){
                               msg += error.getMessage() + '<br />';
                           });
                           Ext.Msg.alert('验证失败', msg);
                       }
                   }
               },{
                   text:'重置表单',
                   ui:'normal',
                   handler:function(){
                       formPanel.reset();
                   }
               }]
           }]
       });
                             
       Ext.Viewport.add(formPanel);
                             
    }
});

点击查看原图点击查看原图点击查看原图

知识共享许可协议
《Sencha表单验证》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     175.38ms