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之间即范围验证,邮箱格式正则验证. 自动验 ...
随机推荐
- CC26XX开发
[CC26XX开发] 2016-01-26 [CC2650 入门] CC2650 sensortag入门 http://processors.wiki.ti.com/index.php/CC2650_ ...
- C++面试常见问题——15函数的值传递、指针传递、引用传递
函数的值传递.指针传递.引用传递 值传递 形参是实参的拷贝,该表形参的值并不会影响外部的实参.值传递是单向的(实参-->形参),参数的值只能传入,不能传出.当函数内部需要修改参数并且不影响调用者 ...
- B. Yet Another Crosses Problem
B. Yet Another Crosses Problem time limit per test 2 seconds memory limit per test 256 megabytes inp ...
- 关于VMware vSphere Client安装时，.net framework4进度条卡住不动（亲测）
亲测有用的办法 1.点击电脑桌面右下角的"开始"按钮,点击"运行"按钮,在弹出的节目输入框中输入"regedit". 2.在弹出来的&quo ...
- ping不通www.baidu.com，但可以访问www.baidu.com网页
https://blog.csdn.net/stpeace/article/details/45116425 了解网络的人, 基本上都用过ping命令, 这个优秀的小工具通常能非常靠谱地检测网络的连通 ...
- 关于连接查询主要是左右连接查询中，where和on的区别
工作中,今天用到左连接查询,我自己造的数据,需要根据条件进行筛选,但是筛选不符合我的要求,最终发现是左右连接中where和on的区别,在作怪,工作中用的表关联太多,我下面简化要点,仅仅把注意点写个简单 ...
- [ cocos2d-JS ] 启动项目
1, 打开windows命令行 2, cd 到项目的文件夹 3, 执行 cocos run -p web
- R 数据框的操作
1.插入一列 根据自带数据集beaver 进行操作,比如插入一列id. > colnames(beaver1) [1] "day" "time" &quo ...
- 一百零八、SAP的OO-ALV之二，创建屏幕Screen
一.在资源管理器,右键->创建屏幕 二.输入4位数字 三.输入屏幕的描述 四.在逻辑流里面PBO用于显示屏幕,PAI用于用户交互. 五.在元素清单里面,在屏幕中的所有元素都是在元素清单中的
- 049-PHP输出当前文件的名称
<?php echo __FILE__; //利用常量__FILE__输出当前文件的名称 ?>