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之间即范围验证,邮箱格式正则验证. 自动验 ...
随机推荐
- STM32F103 USB虚拟串口 驱动例程移植
1)驱动下载及安装.目前ST公司支持WIN7版本号为:VCP_V1.3.1_Setup.exe (在官网上搜索stsw-stm32102即是了):先安装驱动后再插入USB不然安装不成功. 2)固件下载 ...
- html基础与入门
html就是指一个html文件,它是由各种标签组成的 html分为 < !DOCTYPE html > 和 Head 和 Body Head title+meta+link+style B ...
- Linux间传输文件 scp
scp scp使用ssh来传输数据,使用相同的认证方式,所以配置好ssh后,根据用户名和密码来读写远程文件.基本命令如下,输完命令,回车,输入远程用户对应的密码: 从本机复制到远程: 文件:scp F ...
- JavaScript 的一些SAO操作
IE判断检测 jQuery 在 1.9 版本之前,提供了一个浏览器对象检测的属性 .browser 的替代方案.于是各种利用 IE bug 的检测方法被搜了出来: // IE 678 最短方法 var ...
- （三）微信小程序配置
小程序官方文档 全局配置
- CPU与内存
一.存储单元内存有被划分为若干个存储单元,每个存储单元可存放1一个字节,即8个二进制位.因此内存的最小寻址单位是以字节进行的,每个存储单元都有一个编号.比如1GB的内存,可以储存1024*1024*1 ...
- NAND厂商哭晕：减产也阻止不了跌价
导读 NAND闪存价格已经连跌了6个季度,这让上游NAND厂商三星.东芝.美光等损失惨重,纷纷削减NAND产能.在群联台北电脑展上,群联公司董事长潘建成也预测NAND闪存价格已经跌破了成本,未来跌幅会 ...
- Dockerfile详解，以及构建自定义镜像
Dockerfile使用 前面的操作我们一直下载下载官方已经构建好的镜像,直接下载后就可以run,如果我们想要在镜像中添加自己的应用,比如在tomcat中添加自己的app,构建一个自定义的镜像,那么我 ...
- JAVA中的指针
不同于CPP,JAVA中不需要程序员对指针进行操作.不过,这不代表JAVA没有指针,事实上,JAVA的指针操作都被底层代码封装了.笔者在初学Java时,虽然就了解了形参,实参,StringBuffer ...
- Android Studio模拟器无法访问网络
Android Studio3.5 模拟器无法访问网络的原因?