model
Ext.define('app.model.Register', {
extend: 'Ext.data.Model',
requires: ['Ext.data.JsonP'],
config: {
fields: [{
name: 'mobile',
type: 'int'
},
{
name: 'verifycode',
type: 'int'
},
{
name: 'email',
type: 'string'
},
{
name: 'password',
type: 'string'
},
{
name: 'passwordTwo',
type: 'string'
},
{
name: 'realname',
type: 'string'
},
{
name: 'cityid',
type: 'int'
},
{
name: 'address',
type: 'string'
},
{
name: 'sex',
type: 'int'
},
{
name: 'tService',
type: 'string'
}],
validations: [{
field: 'realname',
type: 'presence',
message: '请输入姓名!'
},
{
field: 'password',
type: 'presence',
message: '请输入密码!'
},
{
field: 'email',
type: 'email',
message: '请输入正确的邮箱地址!'
},
{
field: 'verifycode',
type: 'presence',
message: '请输入验证码!'
},
{
field: 'mobile',
type: 'format',
matcher: /^(1(([35][0-9])|(47)|[8][0126789]))\d{8}$/,
message: '请输入11位手机号码!'
}]
},
//添加自定义验证
validate: function (options) {
var me = this,
errors = me.callParent(arguments),
tService = this.get('tService'),
password = this.get('password'),
passwordConfirm = this.get('passwordTwo');
if (password != passwordConfirm) {
errors.add({
field: 'passwordConfirm',
message: '两次密码输入不一致!'
})
}
if (tService == 'O') {
if (this.get('address') == '') {
errors.add({
field: 'address',
message: '请输入地址!'
})
}
}
return errors;
}
});
视图：
Ext.define("app.view.user.Register", {
alternateClassName: 'userRegister',
extend: 'Ext.form.Panel',
xtype: 'userRegister',
requires: ['Ext.form.FieldSet', 'Ext.field.Password', 'Ext.field.Email', 'Ext.field.Select', 'Ext.field.Radio', 'Ext.field.Hidden'],
config: {
padding: 10,
title: '注册',
cls: 'fromPanel',
items: [{
xtype: 'hiddenfield',
itemId: 'tService',
name: 'tService'
},
{
xtype: 'fieldset',
iconCls: 'home',
defaults: {
labelWidth: '40%'
},
items: [{
xtype: 'textfield',
name: 'mobile',
placeHolder: '手机号码(点图标取验证码)',
cls: 'user ico x-field-clearable'
},
{
xtype: 'textfield',
name: 'verifycode',
placeHolder: '验证码'
}]
},
{
xtype: 'fieldset',
iconCls: 'home',
defaults: {
labelWidth: '40%'
},
items: [{
xtype: 'emailfield',
name: 'email',
placeHolder: '电子邮件'
},
{
xtype: 'passwordfield',
name: 'password',
placeHolder: '密码'
},
{
xtype: 'passwordfield',
name: 'passwordTwo',
placeHolder: '再次输入密码'
},
{
xtype: 'textfield',
name: 'realname',
placeHolder: '姓名'
},
{
xtype: 'selectfield',
name: 'cityid',
itemId: 'cityid',
valueField: 'areaCode',
displayField: 'cityname'
},
{
itemId: 'address',
xtype: 'textfield',
name: 'address',
placeHolder: '详细地址'
},
{
layout: 'hbox',
items: [{
xtype: 'radiofield',
name: 'sex',
value: '1',
label: '男',
checked: true,
flex: 1
},
{
xtype: 'radiofield',
name: 'sex',
value: '0',
label: '女',
flex: 1
}]
}]
},
{
xtype: 'button',
action: 'register',
text: '提交注册',
ui: 'action'
}]
}
});
验证代码：
var valid = myUtil.valid('app.model.User', this.getUserLogin());
验证代码中调用的公用类：
/*公共类*/
Ext.define('myUtil', {
statics: {
/*为Ext.Viewport添加一个消息提示组件*/
addMessage: function () {
Ext.Viewport.setMasked({
xtype: 'loadmask',
cls: 'message',
transparent: true,
indicator: false
});
this.hideMessage();
},
/*显示一个消息提示*/
showMessage: function (mes, autoHide) {
var me = this, message = this.getMessage();
message.setMessage(mes);
message.show();
//是否自动关闭提示
if (autoHide) {
setTimeout(function () {
message.hide();
},
500);
}
},
/*隐藏消息提示*/
hideMessage: function () {
this.getMessage().hide();
},
//消息组件
getMessage: function () {
return Ext.Viewport.getMasked();
},
//验证模型
valid: function (model, from) {
var tmpModel = Ext.create(model),
me = this,
errors, valid;
from.updateRecord(tmpModel);
errors = tmpModel.validate();
valid = errors.isValid();
if (!valid) {
errors.each(function (err) {
me.showMessage(err.getMessage(), true);
return;
});
}
return valid;
}
}
});