vue基础之详解ElementUI的表单

<template>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="用户名"><!-- form-item用于显示关联的文件 -->
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="passWord" v-model="form.pwd"></el-input>
  </el-form-item>
      <el-form-item>
    <el-button type="primary" @click="onSubmit">登录</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          pwd:''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

// main.js
import {Form,FormItem,Input,CheckboxGroup,Radio, RadioGroup,Switch} from 'element-ui';
Vue.use(Form)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(FormItem)
Vue.use(Input)
// ...需要哪些引入哪些

<template>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动区域">
      <!-- 记得使用v-model来绑定表单字段 -->
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="即时配送">
      <!-- 记得使用v-model来绑定表单字段 -->
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动形式">
      <!-- 记得使用v-model来绑定表单字段 -->
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          region: '',// 区域
          delivery: false,// 是否及时配送
          desc: '' //活动形式描述
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

<el-form :inline="true">
    <!--// 如此即可 -->
</el-form>

<el-form label-position="left">
    <!--// 如此即可 -->
</el-form>

<template>    
<el-form ref="form" :rules="rules" :model="form" label-width="180px">
  <el-form-item label="活动名称，长度限制" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="url，类型限制" prop="u">
    <el-input v-model="form.url"></el-input>
  </el-form-item>
</el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          url:'',
        },
        rules:{
            name:[
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            u:[
                { type: 'url', required: true, message: '必须为规范的url地址', trigger: 'change' }
            ]
        },
      }
    },
    }
  }
</script>

<el-form-item label="url，类型限制" prop="u">
    <!-- 加上.number修饰符才会把输入值转为数字类型 -->
    <el-input v-model.number="form.num"></el-input>
</el-form-item>

<script>
export default {
    data() {
        let checkNum = (rules,val,callback)=>{
            rules // 这里会得到定义的校验对象的属性
            if(!Number.isInteger(val)){
                // 如果要提示错误信息，那么通过第三个参数回调出去，参数值为Error实例
                callback(new Error('请输入数值'))
            }
        }
        return {
           // 校验规则
            rules:{
	            u:[
                    { type: 'url', required: true, message: '必须为规范的url地址', trigger: 'change' },
                    // 添加一条自定义的验证，值为函数名
                    {validator:checkNum,targger:'change'}
    	        ],
	        },
        }
    }
}
</script>

<el-form size="miniz">
</el-form>

<template>
	<el-form ref="f">
    </el-form>
</template>
<script>
    // 重置表单
    const from = this.$refs.f.resetFields()
</script>