123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <template>
- <uni-section title="自定义校验规则" type="line">
- <view class="example">
- <!-- 自定义表单校验 -->
- <uni-forms ref="customForm" :rules="customRules" :modelValue="form">
- <uni-forms-item label="企业名称" required name="enterpriseName">
- <uni-easyinput v-model="form.enterpriseName" placeholder="请输入企业名称" />
- </uni-forms-item>
- <uni-forms-item label="法人姓名" required name="legalName">
- <uni-easyinput v-model="form.legalName" placeholder="请输入法人姓名" />
- </uni-forms-item>
- <uni-forms-item label="联系电话" required name="phone">
- <uni-easyinput v-model="form.phone" placeholder="请输入联系电话" />
- </uni-forms-item>
- <uni-forms-item label="证照信息" required name="path">
- <upload :imgArr="imageList" name="path" v-model="form.path" :fileSize="1" :limit="3" @updateImg="updateImg"></upload>
- </uni-forms-item>
- </uni-forms>
- <button type="primary" @click="submitForm('customForm')">提交</button>
- </view>
- </uni-section>
- </template>
- <script>
- import upload from '../../components/upload/index.vue'
- import {appletAdd} from '@/api/me/officialAuthentication.js'
- export default {
- components: {
- upload
- },
- onReady() {
- // 设置自定义表单校验规则,必须在节点渲染完毕后执行
- this.$refs.customForm.setRules(this.customRules)
- },
- data() {
- return{
- form:{
-
- },
- // 表单校验
- customRules: {
- name: {
- rules: [{
- required: true,
- errorMessage: '姓名不能为空'
- }]
- },
- },
- imageList:[]
- }
- },
- methods: {
- // 取消按钮
- cancel() {
- this.open = false;
- this.reset();
- },
- /** 提交按钮 */
- submitForm(e) {
- console.log("11111")
- this.$refs[e].validate().then(res => {
- console.log('success', res);
- uni.showToast({
- title: `校验通过`
- })
- }).catch(err => {
- console.log('err', err);
- })
- let path = this.imageList.join(',');
- this.form.path = path
- appletAdd(this.form).then(res =>{})
- },
- updateImg(imgList){
- this.imageList = imgList;
- }
- }
- };
- </script>
- <style>
- </style>
|