标签：console log form message value dataForm 例子 model queryParams

<template>
  <div>
    <a-form-model @submit="handleSubmit" :model="dataForm" ref="dataForm" :rules ="rules">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item label="姓名" prop="name">
            <a-input v-model="dataForm.name" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item label="性别" prop="sex">
            <a-select v-model="dataForm.sex" @change="onChange">
              <a-select-option :value="undefined">请选择</a-select-option>
              <a-select-option v-for="(item, key) in options" :key="key" :value="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item label="住址" prop="address">
            <a-input v-model="dataForm.address" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <a-button @click="handleSubmit()">提交</a-button>
  </div>
</template>

<script>

  export default {
    data() {
      const regAddress = (rule, value, callback) =>{
        if (!value) {
          callback(new Error('请输入住址!'))
        } else {
          callback()
        }
      }
      return {
        options:[{value:'nan',text:'男'},{value:'nv',text:'女'}],
        dataForm: {
          name: '',
          sex:'',
          address:'',
        },
        rules:{
          name: [
            { required: true, message: '请输入姓名', trigger: 'change' },
            { min: 3, max: 5, message: '长度在3到5之间', trigger: 'change' }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'change'},
          ],
          address: [
            { required: true, validator:regAddress, trigger: 'change'},
          ]
        }
      }
    },
    methods:{
      onChange(e){
        console.log(e)
      },
      //提交校验
      handleSubmit() {
        let _this = this;
        let queryParams = this.dataForm;
        console.log("======================")
        console.log(queryParams);
        console.log(queryParams.name);
        console.log(queryParams.sex);
        console.log(queryParams.address);
        console.log("======================")
        _this.$refs.dataForm.validate(valid => {
          if (valid) {
            _this.loading = true;
            this.$refs.dataForm.resetFields();
            this.$message.success('提交成功!');
          } else {
            return false;
          }
        });
      }
    }
  }

</script>

标签：console,log,form,message,value,dataForm,例子,model,queryParams
来源： https://www.cnblogs.com/henuyuxiang/p/16373643.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。