vur iview 表单提交数据

下载module 

$  npm install --save iview

在main导入 

 

import iView from 'iview' // 引入iview依赖
import 'iview/dist/styles/iview.css' // 引入iview css样式
Vue.use(iView) //使用iview组件 

登录页面调用  v-model 绑定数据  :rules   没有输入或者输入错误时候的提示  

<Form ref="formInline" :model="formInline" :rules="ruleInline">
				<FormItem prop="user">
					<Input type="text" v-model="formInline.user" placeholder="Username" />
					<Icon type="ios-person-outline" slot="prepend"></Icon>
				</FormItem>
				<FormItem prop="password">
					<Input type="password" v-model="formInline.password" placeholder="Password" />
					<Icon type="ios-lock-outline" slot="prepend"></Icon>
				</FormItem>
				<FormItem>
					<button class="submit" type="primary" :loading="loading" @click="handleSubmit('formInline')">登入</button>
				</FormItem>
			</Form>

data中的参数

return {
      // input1: "",
      // input2: ""
      formInline: {
					user: '',
					password: ''
				},
				ruleInline: { // 输入错误时的提示
					user: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							type: 'string',
							min: 5,
							message: '密码长度不能小于6位',
							trigger: 'blur'
						}
					]
        },
        loading: false
    };

 

点击登录后的方法

handleSubmit(name) {
		this.$refs[name].validate((valid) => {
            if(valid){
                // 提交数据代码
            }
        
        });
      });
    }