|
@@ -0,0 +1,78 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <u-form :model="form" ref="uForm">
|
|
|
+ <u-form-item label="姓名"><u-input placeholder="请输入姓名" v-model="form.name" /></u-form-item>
|
|
|
+ <u-form-item label="电话"><u-input placeholder="请输入电话" v-model="form.mobile" /></u-form-item>
|
|
|
+ <u-form-item label="地址"><u-input placeholder="请输入收货地址(省+市+区+详细地址)" v-model="form.address" /></u-form-item>
|
|
|
+ </u-form>
|
|
|
+ <view class="buttons">
|
|
|
+ <u-button type="primary" @click="submit">提交</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ mobile: '',
|
|
|
+ address: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入姓名',
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ['change','blur'],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ mobile: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入电话',
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ['change','blur'],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ address: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ min: 100,
|
|
|
+ message: '地址不能少于100个字',
|
|
|
+ trigger: ['change','blur']
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submit() {
|
|
|
+ this.$refs.uForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ console.log('验证通过');
|
|
|
+ } else {
|
|
|
+ console.log('验证失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
|
|
|
+ onReady() {
|
|
|
+ this.$refs.uForm.setRules(this.rules);
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .content{
|
|
|
+ padding: 0 20upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ width: 100%;
|
|
|
+ .buttons{
|
|
|
+ padding: 80upx 100upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|