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组件
官⽅⽂档
<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>eptip
</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>
...
// 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.$('Fail!');
分频器设计console.log("error")
}
})
}
}
...
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议