Vue iview 表单封装验证
以下内容转自iview社区，仅供自己查看使用 Form表单部分
<div>
<Form ref="FormOne" :model="FormOne" :rules="ruleFormOne" :label-width="80">
<FormItem label="姓名" prop="name">
<i-input type="text" v-model="FormOne.name"></i-input>
</FormItem>
<FormItem label="身份证" prop="idCard">
<i-input type="text" v-model="FormOne.idCard"></i-input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('FormOne')">提 交</Button>
<Button @click="handleReset('FormOne')" style="margin-left: 8px">重 置</Button>
</FormItem>
</Form></div>
新建 Format.js 文件，编写校验规则
var regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/var email = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/var tel = /^1[345789]\d{9}$/var fax = /^(\d{3,4}-)?\d{7,8}$/var FormValidate = (function () {
// eslint-disable-next-line
function FormValidate() {}
// From表单验证规则 可用于公用的校验部分
FormValidate.Form = function () {
return {
// 姓名的验证规则
Email: function (rule, value, callback) {
if (!value) {
return callback(new Error('邮箱不能为空'))
}
if (!email.test(value)) {
callback(new Error('请输入正确的邮箱!'))
} else {
callback()
}
},
// 身份证的验证规则
ID: function (rule, value, callback) {
if (!value) {
return callback(new Error('身份证不能为空'))
}
if (!regId.test(value)) {
callback(new Error('请输入正确的二代身份证号码'))
} else {
callback()
}
},
// 电话号码的验证
Tel: (rule, value, callback) => {
if (!value) {
return callback(new Error('电话不能为空'))
}
if (!tel.test(value)) {
callback(new Error('请正确填写电话号码'))
} else {
callback()
}
}
}
} // FromOne表单验证规则 用于FromOne个性化的校验
FormValidate.FormOne = function () {
return {
// 姓名的验证规则
Name: function (rule, value, callback) {
if (!value) {
return callback(new Error('姓名不能为空'))
}
if (!isNaN(value)) {
callback(new Error('请输入正确姓名!'))
} else if (value.length < 2 || value.length > 6) {
callback(new Error('请输入2到6个字符!'))
} else {
callback()
}
}
}
} // FromTwo表单验证规则 用于FromTwo表单个性化的校验
FormValidate.FormTwo = function () {
return {
// 传真的校验规则
Fax: (rule, value, callback) => {
if (!value) {
return callback(new Error('传真不能为空'))
}
if (!fax.test(value)) {
callback(new Error('请正确填写传真'))
} else {
callback()
}
}
}
}
return FormValidate
}())
exports.FormValidate = FormValidate
在组件的js中引入 Format.js文件
import Format from "./Format.js"
组件内js部分
export default {
data() {
return {
FormOne: {
name: "",
idCard: "",
age: ""
},
ruleFormOne: {
name: [
{
validator: Format.FormValidate.FormOne().Name,
trigger: "blur"
}
],
idCard: [
{
validator: Format.FormValidate.Form().Tel,
trigger: "blur"
}
]
}
};
},
mounted() {
console.log(Format.FormValidate.FormOne().name);
},
methods: {
handleSubmit(name) {
this.$refs[name].validate(valid => {
if (valid) {
this.$Message.success("Success!");
} else {
this.$Message.error("Fail!");
}
});
},
handleReset(name) {
this.$refs[name].resetFields();
}
}
};
Form表单部分
<div>
<Form ref="FormOne" :model="FormOne" :rules="ruleFormOne" :label-width="80">
<FormItem label="姓名" prop="name">
<i-input type="text" v-model="FormOne.name"></i-input>
</FormItem>
<FormItem label="身份证" prop="idCard">
<i-input type="text" v-model="FormOne.idCard"></i-input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('FormOne')">提 交</Button>
<Button @click="handleReset('FormOne')" style="margin-left: 8px">重 置</Button>
</FormItem>
</Form></div>
新建 Format.js 文件，编写校验规则
var regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/var email = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/var tel = /^1[345789]\d{9}$/var fax = /^(\d{3,4}-)?\d{7,8}$/var FormValidate = (function () {
// eslint-disable-next-line
function FormValidate() {}
// From表单验证规则 可用于公用的校验部分
FormValidate.Form = function () {
return {
// 姓名的验证规则
Email: function (rule, value, callback) {
if (!value) {
return callback(new Error('邮箱不能为空'))
}
if (!email.test(value)) {
callback(new Error('请输入正确的邮箱!'))
} else {
callback()
}
},
// 身份证的验证规则
ID: function (rule, value, callback) {
if (!value) {
return callback(new Error('身份证不能为空'))
}
if (!regId.test(value)) {
callback(new Error('请输入正确的二代身份证号码'))
} else {
callback()
}
},
// 电话号码的验证
Tel: (rule, value, callback) => {
if (!value) {
return callback(new Error('电话不能为空'))
}
if (!tel.test(value)) {
callback(new Error('请正确填写电话号码'))
} else {
callback()
}
}
}
}
// FromOne表单验证规则 用于FromOne个性化的校验
FormValidate.FormOne = function () {
return {
// 姓名的验证规则
Name: function (rule, value, callback) {
if (!value) {
return callback(new Error('姓名不能为空'))
}
if (!isNaN(value)) {
callback(new Error('请输入正确姓名!'))
} else if (value.length < 2 || value.length > 6) {
callback(new Error('请输入2到6个字符!'))
} else {
callback()
}
}
}
}
// FromTwo表单验证规则 用于FromTwo表单个性化的校验
FormValidate.FormTwo = function () {
return {
// 传真的校验规则
Fax: (rule, value, callback) => {
if (!value) {
return callback(new Error('传真不能为空'))
}
if (!fax.test(value)) {
callback(new Error('请正确填写传真'))
} else {
callback()
}
}
}
}
return FormValidate
}())
exports.FormValidate = FormValidate
在组件的js中引入 Format.js文件
import Format from "./Format.js"
组件内js部分
export default {
data() {
return {
FormOne: {
name: "",
idCard: "",
age: ""
},
ruleFormOne: {
name: [
{
validator: Format.FormValidate.FormOne().Name,
trigger: "blur"
}
],
idCard: [
{
validator: Format.FormValidate.Form().Tel,
trigger: "blur"
}
]
}
};
},
mounted() {
console.log(Format.FormValidate.FormOne().name);
},
methods: {
handleSubmit(name) {
this.$refs[name].validate(valid => {
if (valid) {
this.$Message.success("Success!");
} else {
this.$Message.error("Fail!");
}
});
},
handleReset(name) {
this.$refs[name].resetFields();
}
}
};
.
方法是共通的 在其他Vue组件库中同样使用
Vue iview 表单封装验证的更多相关文章
- 有关使用 iview 表单验证的问题
Vue的UI解决框架,element-UI, iview-UI 有关表单验证使用的是同一个插件,async-validator,有关这个插件的用法就不做赘述,但是在iview表单的使用中可能会用到验证 ...
- iview表单验证下拉框不通过问题
iview表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意 ...
- iview表单验证不生效问题注意点
按照iview官网介绍写的form表单验证,但是无论填写与否都不进行校验,找了很久的原因,突然才发现一个关键的地方,一定要加props!!! https://blog.csdn.net/xuaner8 ...
- iview表单验证之正则验证、函数验证
iview表单验证之正则 正则验证: 代码: loginRules: { stringLength: [ { required: true, message: '该字段不能为空', trigger: ...
- vue+element 表单封成组件(1)
作为一名刚接触vue不到一个月的菜鸟,思想还没有从操作DOM转变为数据驱动,看vue的代码处处别扭.组里为了让我熟悉vue交给了我一个将element 表单封装成组件的练手任务.由于开发过程中遇到的表 ...
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- v-if案例解析（element-ui form-item 结合 v-if 动态生成rule规则\表单元素，表单无法验证问题剖析 ）
fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...
- 深入了解Element Form表单动态验证问题 转载
随风丶逆风 2020-04-03 15:36:41 2208 收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...
- thinkphp表单自动验证
ThinkPHP框架表单验证 对注册到test表的表单进行验证 在注册之前要对表单进行验证: 用户名非空验证,两次输入密码必须一致即相等验证,年龄在18~50之间即范围验证,邮箱格式正则验证. 自动验 ...
随机推荐
- word中图片的导出
楼上说到的方法都是可行的,其实还有个更方便快捷的保存方式,特别是看到一篇word文档里有很多好看的图片想以图片格式单独保存下来观赏,用作其它,如QQ表情等,此方法更见优势:打开文档——文件——另存为— ...
- VTK基于MFC单文档的开发
目录 项目的搭建 相关头文件的引用 添加成员变量vtkRenderer, vtkMFCWindow CXxxView()中实例化变量vtkRenderer CXxxView::OnInitialUpd ...
- linux 下office软件推荐
概述 最近想使用LINUX下搭建服务器,所以查找一些需要用的软件. linux下最好的office解决办法 其实因为我是不怎么使用office的,我也不知道不同office有什么不一样,直到有一次写奖 ...
- 050、Java中使用switch判断，使用字符串判断
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- List<string>绑定到DataGridView控件
问题 将一个简单的List<string>作为数据源绑定到 DataGridView myDataGridView.DataSource = myStringList; 但是只得到一个名为 ...
- 多个Spring Boot项目部署在一个Tomcat容器无法启动
转自https://www.cnblogs.com/tomxin7/p/9434085.html 业务介绍 最近用Spring Boot开发了一个翻译的小项目,但是服务器上还跑着其他项目,包括一个同样 ...
- J - Worker
Avin meets a rich customer today. He will earn 1 million dollars if he can solve a hard problem. The ...
- SQL注入汇总（手注，盲注，报错注入，宽字节，二次编码，http头部）{10.22、23 第二十四 二十五天}
首先什么是SQL注入: 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. SQL注入有什么危害? 危害:数据泄露.脱库 ...
- Golang的运算符-位运算符
Golang的运算符-位运算符 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.位运算符概述 常见的位逻辑运算符: &: 位与运算符,表示AND(表示所有条件都得匹配), ...
- DragonFlyBSD 5.6 RC1 发布
导读DragonFlyBSD操作系统下一个主要版本的第一个候选版本RC1现在可以进行测试.DragonFlyBSD 5.6将成为一个功能更新的版本,该功能更新将于周二晚上发布,是第一个候选版本,同时将 ...