<template>
|
<view class="u-demo">
|
<view class="u-demo-wrap">
|
<view class="u-demo-title">演示效果</view>
|
<view class="u-demo-area">
|
<u-toast ref="uToast"></u-toast>
|
<view class="u-no-demo-here" style="text-align: left;">
|
这里仅对部分验证规则进行演示，目前总的验证规则有如下：
|
</view>
|
<u-table style="margin-top: 20rpx;">
|
<u-tr>
|
<u-td>邮箱号</u-td>
|
<u-td>手机号</u-td>
|
<u-td>URL</u-td>
|
<u-td>普通日期</u-td>
|
</u-tr>
|
<u-tr>
|
<u-td>十进制数</u-td>
|
<u-td>身份证号</u-td>
|
<u-td>车牌号</u-td>
|
<u-td>金额</u-td>
|
</u-tr>
|
<u-tr>
|
<u-td>汉字</u-td>
|
<u-td>字母</u-td>
|
<u-td>字母|数字</u-td>
|
<u-td>包含值</u-td>
|
</u-tr>
|
<u-tr>
|
<u-td>数值范围</u-td>
|
<u-td>长度范围</u-td>
|
<u-td width="50%"></u-td>
|
</u-tr>
|
</u-table>
|
</view>
|
</view>
|
<view class="u-config-wrap">
|
<view class="u-config-title u-border-bottom">
|
参数配置
|
</view>
|
<view class="u-config-item">
|
<view class="u-item-title">邮箱</view>
|
<u-subsection :list="email" @change="emailChange"></u-subsection>
|
</view>
|
<view class="u-config-item">
|
<view class="u-item-title">手机号</view>
|
<u-subsection :list="mobile" @change="mobileChange"></u-subsection>
|
</view>
|
<view class="u-config-item">
|
<view class="u-item-title">中文</view>
|
<u-subsection :list="chinese" @change="chineseChange"></u-subsection>
|
</view>
|
<view class="u-config-item">
|
<view class="u-item-title">整数</view>
|
<u-subsection :list="digits" @change="digitsChange"></u-subsection>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
email: ['google@gmail.com', 'google艾特gmail.com'],
|
mobile: ['13478561273', '0778-3423082'],
|
chinese: ['天青色等烟雨', 'Beat it'],
|
digits: [283, '下雨的声音']
|
}
|
},
|
methods: {
|
toast(type) {
|
this.$refs.uToast.show({
|
type: type ? 'success' : 'error',
|
title: type ? '验证通过' : '验证失败'
|
})
|
},
|
emailChange(index) {
|
this.toast(this.$u.test.email(this.email[index]));
|
},
|
mobileChange(index) {
|
this.toast(this.$u.test.mobile(this.mobile[index]));
|
},
|
chineseChange(index) {
|
this.toast(this.$u.test.chinese(this.chinese[index]));
|
},
|
digitsChange(index) {
|
this.toast(this.$u.test.digits(this.digits[index]));
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.u-demo {}
|
</style>
|
