123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- <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>
|