Vue学习-iView组件-Form表单

Form表单

#1 环境

"view-design": "^4.0.0",
"vue": "^2.5.2",

#2 原生form

<template>
	<div>
		<form>
			<input type="text" v-model="form.username" placeholder="用户名">
			<input type="text" v-model="form.password" placeholder="密码">
			<button @click="submitForm">登录</button>
		</form>
	</div>
</template>

<script>

    export default {
        name: "test",
        data() {
            return {
                form:{
                    username:"admin",
                    password:"123456",
                }
            }
        },
	    methods:{
            submitForm(){
	            var formdata = JSON.stringify(this.form)
	            console.log(formdata)
            }
	    }
    }
</script>

---

---

#3 iView组件

官方文档

https://www.iviewui.com/components/form

<template>
	<div>
		<Form ref="formlogin" :model="form" inline>
			<FormItem prop="user">
				<Input type="text" v-model="form.username" placeholder="Username">
					<Icon type="ios-person-outline" slot="prepend"></Icon>
				</Input>
			</FormItem>
			<FormItem prop="password">
				<Input type="password" v-model="form.password" placeholder="Password">
					<Icon type="ios-lock-outline" slot="prepend"></Icon>
				</Input>
			</FormItem>
			<FormItem>
				<Button type="primary" @click="submitForm">登录</Button>
			</FormItem>
		</Form>
	</div>
</template>

<script>

    export default {
        name: "test",
        data() {
            return {
                form:{
                    username:"admin",
                    password:"123456",
                }
            }
        },
        methods:{
            submitForm(){
                var formdata = JSON.stringify(this.form)
                console.log(formdata)
            }
        }
    }
</script>

#3.1 添加字段校验

...
// ref="formlogin" 注册, 方便获取标签
// :rules="rulelogin" 表单规则, 在data里面定义表单规则
<Form ref="formlogin" :model="form" :rules="rulelogin" inline>
...

data() {
    return {
        form:{
            username:"admin",
            password:"123456",
        },
        rulelogin: {  // 校验表单规则
            username: [// FormItem标签中的 prop 属性预期值
                { required: true, message: '用户名不能为空', trigger: 'blur' }
            ],
            password: [// FormItem标签中的 prop 属性预期值
                { required: true, message: '密码不能为空', trigger: 'blur' },
                { type: 'string', min: 6, message: '密码至少需要6位', trigger: 'blur' }
            ]
        }
    }
},
methods:{
    submitForm(){
        this.$refs['formlogin'].validate((valid) => {
		// this.$refs['formlogin'].validate : 获取表单校验结果; 校验正确-> valid为True; 校验失败-> valid为False;
            if (valid) {
                var formdata = JSON.stringify(this.form)
                console.log(formdata)
                // this.$Message.success('Success!');
            } else {
                // this.$Message.error('Fail!');
                console.log("error")
            }
        })
    }
}
...