feat(ContactEdit): show error message in field (#5437)

This commit is contained in:
rex 2020-01-02 16:10:49 +08:00 committed by neverland
parent 67d0811596
commit 307a233a88
7 changed files with 14 additions and 10 deletions

View File

@ -1,7 +1,6 @@
import { createNamespace } from '../utils'; import { createNamespace } from '../utils';
import Button from '../button'; import Button from '../button';
import Field from '../field'; import Field from '../field';
import Toast from '../toast';
import Dialog from '../dialog'; import Dialog from '../dialog';
import Switch from '../switch'; import Switch from '../switch';
import Cell from '../cell'; import Cell from '../cell';
@ -38,8 +37,8 @@ export default createComponent({
...this.contactInfo ...this.contactInfo
}, },
errorInfo: { errorInfo: {
name: false, name: '',
tel: false tel: ''
} }
}; };
}, },
@ -55,14 +54,14 @@ export default createComponent({
methods: { methods: {
onFocus(key) { onFocus(key) {
this.errorInfo[key] = false; this.errorInfo[key] = '';
}, },
getErrorMessageByKey(key) { getErrorMessageByKey(key) {
const value = this.data[key].trim(); const value = this.data[key].trim();
switch (key) { switch (key) {
case 'name': case 'name':
return value ? '' : t('nameEmpty'); return value ? '' : t('nameInvalid');
case 'tel': case 'tel':
return this.telValidator(value) ? '' : t('telInvalid'); return this.telValidator(value) ? '' : t('telInvalid');
} }
@ -72,8 +71,7 @@ export default createComponent({
const isValid = ['name', 'tel'].every(item => { const isValid = ['name', 'tel'].every(item => {
const msg = this.getErrorMessageByKey(item); const msg = this.getErrorMessageByKey(item);
if (msg) { if (msg) {
this.errorInfo[item] = true; this.errorInfo[item] = msg;
Toast(msg);
} }
return !msg; return !msg;
}); });
@ -105,7 +103,7 @@ export default createComponent({
maxlength="30" maxlength="30"
label={t('name')} label={t('name')}
placeholder={t('nameEmpty')} placeholder={t('nameEmpty')}
error={errorInfo.name} errorMessage={errorInfo.name}
onFocus={onFocus('name')} onFocus={onFocus('name')}
/> />
<Field <Field
@ -114,7 +112,7 @@ export default createComponent({
type="tel" type="tel"
label={t('tel')} label={t('tel')}
placeholder={t('telEmpty')} placeholder={t('telEmpty')}
error={errorInfo.tel} errorMessage={errorInfo.tel}
onFocus={onFocus('tel')} onFocus={onFocus('tel')}
/> />
</div> </div>

View File

@ -9,6 +9,7 @@ export default {
loading: 'Loading...', loading: 'Loading...',
telEmpty: 'Please fill in the tel', telEmpty: 'Please fill in the tel',
nameEmpty: 'Please fill in the name', nameEmpty: 'Please fill in the name',
nameInvalid: 'Malformed name',
confirmDelete: 'Are you sure you want to delete?', confirmDelete: 'Are you sure you want to delete?',
telInvalid: 'Malformed phone number', telInvalid: 'Malformed phone number',
vanCalendar: { vanCalendar: {

View File

@ -9,6 +9,7 @@ export default {
loading: 'Cargando...', loading: 'Cargando...',
telEmpty: 'Por favor rellena el teléfono', telEmpty: 'Por favor rellena el teléfono',
nameEmpty: 'Por favor rellena el nombre', nameEmpty: 'Por favor rellena el nombre',
nameInvalid: 'nombre inválido',
confirmDelete: 'Estás seguro de eliminarlo?', confirmDelete: 'Estás seguro de eliminarlo?',
telInvalid: 'Teléfono inválido', telInvalid: 'Teléfono inválido',
vanCalendar: { vanCalendar: {

View File

@ -9,6 +9,7 @@ export default {
loading: 'Yükleniyor...', loading: 'Yükleniyor...',
telEmpty: 'Lütfen tel. no giriniz', telEmpty: 'Lütfen tel. no giriniz',
nameEmpty: 'Lütfen isim giriniz', nameEmpty: 'Lütfen isim giriniz',
nameInvalid: 'Geçersiz isim',
confirmDelete: 'Silmek istediğinize emin misiniz?', confirmDelete: 'Silmek istediğinize emin misiniz?',
telInvalid: 'Geçersiz tel. numarası', telInvalid: 'Geçersiz tel. numarası',
vanCalendar: { vanCalendar: {

View File

@ -9,8 +9,9 @@ export default {
loading: '加载中...', loading: '加载中...',
telEmpty: '请填写电话', telEmpty: '请填写电话',
nameEmpty: '请填写姓名', nameEmpty: '请填写姓名',
nameInvalid: '请输入正确的姓名',
confirmDelete: '确定要删除么', confirmDelete: '确定要删除么',
telInvalid: '请填写正确的电话', telInvalid: '请输入正确的手机号',
vanCalendar: { vanCalendar: {
end: '结束', end: '结束',
start: '开始', start: '开始',

View File

@ -9,6 +9,7 @@ export default {
loading: '加載中...', loading: '加載中...',
telEmpty: '請填寫電話', telEmpty: '請填寫電話',
nameEmpty: '請填寫姓名', nameEmpty: '請填寫姓名',
nameInvalid: '請輸入正確的姓名',
confirmDelete: '確定要刪除麽', confirmDelete: '確定要刪除麽',
telInvalid: '請填寫正確的電話', telInvalid: '請填寫正確的電話',
vanCalendar: { vanCalendar: {

View File

@ -9,6 +9,7 @@ export default {
loading: '載入中...', loading: '載入中...',
telEmpty: '請填寫電話', telEmpty: '請填寫電話',
nameEmpty: '請填寫姓名', nameEmpty: '請填寫姓名',
nameInvalid: '請輸入正確的姓名',
confirmDelete: '確定要刪除嗎', confirmDelete: '確定要刪除嗎',
telInvalid: '請填寫正確的電話', telInvalid: '請填寫正確的電話',
vanCalendar: { vanCalendar: {