一、在Vue 中使用表单的双向绑定，提交按钮获取表单数据示例
1.vue 视图
<template>
<div>
<h3>行内表单</h3>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="审批人">
<el-input v-model="formInline.user" placehoder="请输入审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="formInline.region" placeholer="活动区域">
<el-option label="上海" value="shanghai"></el-option>
<el-option label="北京" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
</template>
2.js代码
export default {
data() {
return {
formInline: {}
};
},
methods: {
onSubmit() {
//打印表单数据
console.info(this.formInline);
}
}
};
3.打印获取的表单数据
image
二、表单提交前验证处理,动态增加表单项处理
<template>
<el-form :model="dynamicForm" ref="dynamicForm" label-width="100px" class="demo-form">
<el-form-item
prop="email"
label="邮箱"
:rules="[
{required:true,message:'请输入邮箱地址'},
{type:'email',message:'邮箱格式不真确'}
]"
>
<el-input v-model="dynamicForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain,index) in dynamicForm.domains"
:label="'域名'+index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="[
{required:true,message:'域名不能空',trigger:'blur'}
]"
>
<el-input v-model="domain.value"></el-input>
<el-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicForm')">提交</el-button>
<el-button @click="addDomain">新增域名</el-button>
<el-button @click="resetForm('dynamicForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
js代码示例：
export default {
data() {
return {
dynamicForm: {
domains: [{ value: "" }],
email: ""
}
};
},
methods: {
//提交
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert(JSON.stringify(this.dynamicForm));
} else {
return false;
}
});
},
//重置
resetForm(formName) {
this.$refs[formName].resetFields();
},
//增加域名项
addDomain() {
this.dynamicForm.domains.push({
value: "",
key: Date.now()
});
},
//删除域名项
removeDomain(item) {
var index = this.dynamicForm.domains.indexOf(item);
if (index != -1) {
this.dynamicForm.domains.splice(index, 1);
}
}
}
};
表单验证
一、数字类型验证 type=number
<template>
<div>
<h3>数字类型验证</h3>
<el-form :inline="true" :model="numForm" ref="numForm" class="demo-ruleForm">
<el-form-item
label="年龄"
prop="age"
:rules="[
{required:true,message:'年龄不能为空'},
{type:'number',message:'年龄必须为数字'}
]"
>
<el-input type="age" v-model.number="numForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numForm')">提交</el-button>
<el-button @click="resetForm('numForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
export default {
data() {
return {
numForm: {}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit1");
} else {
return false;
}
});
},
//重置操作
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
二、邮箱类型验证 type=emial
<template>
<div>
<h3>邮箱验证</h3>
<el-form :inline="true" :model="numForm" ref="numForm" class="demo-ruleForm">
<el-form-item
label="邮箱"
prop="email"
:rules="[
{required:true,message:'邮箱不能为空'},
{type:'email',message:'请输入正确的邮箱地址',trigger:'blur'}
]"
>
<el-input type="email" v-model="numForm.email"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numForm')">提交</el-button>
<el-button @click="resetForm('numForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
三、url类型验证,type=url
<template>
<div>
<h3>Url验证</h3>
<el-form :model="numForm" ref="numForm" class="demo-ruleForm">
<el-form-item
label="链接地址"
prop="url"
:rules="[
{required:true,message:'链接不能为空'},
{type:'url',message:'请输入正确的链接',trigger:'blur'}
]"
>
<el-input type="url" v-model="numForm.url"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numForm')">提交</el-button>
<el-button @click="resetForm('numForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
四、字符长度类型,min,max
<template>
<div>
<h3>字符长度类型</h3>
<el-form :model="numForm" ref="numForm" class="demo-ruleForm">
<el-form-item
label="标题"
prop="title"
:rules="[
{required:true,message:'标题不能为空'},
{min:3,max:10,message:'字符长度3-10之间',trigger:'blur'}
]"
>
<el-input type="title" v-model="numForm.title"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numForm')">提交</el-button>
<el-button @click="resetForm('numForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
五、手机号类型,使用自定义规则 ：rules
<template>
<div>
<h3>手机号类型</h3>
<el-form :model="numForm" :rules='rules' ref="numForm" class="demo-ruleForm">
<el-form-item label="手机号" prop="mobile">
<el-input type="mobile" v-model="numForm.mobile"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numForm')">提交</el-button>
<el-button @click="resetForm('numForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
js定义验证规则
//定义一个全局的变量，谁用谁知道
var validPhone = (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入电话号码"));
} else if (!isvalidPhone(value)) {
callback(new Error("请输入正确的11位手机号码"));
} else {
callback();
}
};
// 手机号验证
function isvalidPhone(str) {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
return reg.test(str);
}
export default {
data() {
return {
numForm: {
mobile:''
},
rules: {
mobile: [
{
required:true,
trigger: "blur",
validator: validPhone
}
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert(JSON.stringify(this.numForm));
} else {
return false;
}
});
},
//重置操作
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
一、表单验证，常见类型
详细说明：https://github.com/yiminghe/async-validator
Type
Indicates the type of validator to use. Recognised type values are:
string: Must be of type string. This is the default type.
number: Must be of type number.
boolean: Must be of type boolean.
method: Must be of type function.
regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
integer: Must be of type number and an integer.
float: Must be of type number and a floating point number.
array: Must be an array as determined by Array.isArray.
object: Must be of type object and not Array.isArray.
enum: Value must exist in the enum.
date: Value must be valid as determined by Date
url: Must be of type url.
hex: Must be of type hex.
email: Must be of type email.
更多代码示例：https://my.oschina.net/tianma3798/blog/3010171
二、自定义验证规则、异步验证
验证使用:rules 定义js验证处理，或者单独指定某一项的：rules配置处理。
<template>
<div>
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px">
<el-form-item label="用户名" prop="username">
<el-input type="text" v-model="ruleForm2.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm2.pass"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass"></el-input>
</el-form-item>
<el-form-item
label="年龄"
prop="age"
:rules="[
{required:true,message:'年龄不能空'},
{type:'number',message:'请输入数字',trigger:'blur'}
]"
>
<el-input type="age" v-model.number="ruleForm2.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
<el-button @click="resetForm('ruleForm2')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
js示例代码：
export default {
data() {
//定义验证规则
var checkUserName = (rule, value, callback) => {
if (!value) {
return callback(new Error("用户不能空"));
}
//延迟验证
// setTimeout(() => {
// if (!Number.isInteger(value)) {
// callback(new Error("不能纯数字"));
// } else {
// callback();
// }
// }, 1000);
//异步验证
$.get(
"http://api.gongjuji.net/download/addrecord?type=1&content=uploader6.0%E6%BA%90%E7%A0%81%E4%B8%8B%E8%BD%BD",
function(data) {
console.info(data);
if (!data) {
callback("用户名不正确");
} else {
callback();
}
}
);
};
//验证码确认验证码处理
var validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
if (this.ruleForm2.checkPass !== "") {
this.$refs.ruleForm2.validateField("checkPass");
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.ruleForm2.pass) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
return {
ruleForm2: {},
rules2: {
username: [
{ required: true, validator: checkUserName, trigger: "blur" }
],
pass: [{ required: true, validator: validatePass,trigger:'blur' }],
checkPass: [{ required: true, validator: validatePass2 }]
}
};
},
methods: {
//提交验证
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert(JSON.stringify(this.ruleForm2));
} else {
return false;
}
});
},
//重置表单
resetForm(formName) {
this.$refs[formName].resetFileds();
}
}
};
