0.1.6 • Published 5 years ago
from_validator v0.1.6
from_validator
说明
基于vue-cli3 版本 利用vue自定义指令封装的一个仿elementUi 表单验证的框架
下载项目
npm i from_validator
cnpm i from_validator
运行项目
下载后再 main.js 里引入
import from_validator from "from_validator";
import 'from_validator/lib/from_validator.css';
Vue.use(from_validator)
在单个.vue文件里直接使用
<from_validation></from_validation>
基本使用(方法or变量)
方法或参数 | 说明
---- | -----
FromRules | 在data里定义,使用方式基本与elementUI 表单验证一致
fromEvent | 无需定义 或 自定义 (根据需求 自定义定义在data中,且pops参数值得与 fromEvent里的bindName字段一致)
pops | 自定义绑定验证的参数
goRegister | 在data里定义,跳去注册页的文字描述
successfully | 在方法里定义,表单验证成功的回调
defeated | 在方法里定义,表单验证失败的回调
goRegisterPage | 在方法里定义,点击跳转注册页的回调事件
fromEvent 基本参数
fromEvent:[
{
title:'邮箱', (文本框的提示值)
bindName:'email', (pops验证的参数名)
bindValue:'', (文本框的值)
},
{
title:'密码',
bindName:'password',
bindValue:'',
}
]
FromRules 基本参数
FromRules: {
email: [
{
required: true, (required 为true 必填验证)
type: "email", (type类型 有 email、phone、password等类型)
trigger: "blur",(触发方式 blur失去焦点后触发 change input值改变就触发 )
msg: "邮箱格式不正确",(验证的提示)
}
],
password: [
{
required: true,
type: "password",
trigger: "change",
msg: "密码格式不正确"
},
{ min: 6, max: 15, trigger: "blur", msg: "密码的长度在6和15之间" } (min 最小长度,max 最大长度)
],
password2: [
{
required: true,
type: "password",
trigger: "change",
msg: "确认密码格式不正确"
},
{ min: 6, max: 15, trigger: "blur", msg: "确认密码长度在6和15之间" },
{ alike: "password", msg: "两次密码不一致", trigger: "blur" } (alike 匹配密码是否一致)
]
}
如默认不满足需求 可使用插槽自定义,(但不满足格式可能会报错)列:
<template slot="logo">放置自己的logo</template>
<template slot="input">
放置自己的表单元素 文本框格式为:
<div class="usersFrom-input">
<input
class="usersFrom-input-item"
type="password"
v-model="userLoginFrom.password"
pops="password"
>
<div class="usersFrom-input-message">
<label class="usersFrom-input-label">密码</label>
<label class="usersFrom-input-label usersFrom-input-rules"></label>
</div>
</div>
</template>
<template slot="submit">
放置自己的按钮 需在按钮上加上 v-submit 指令
</template>
其他方法
message: this.$message({
type: "success", ('类型有error、success、warning、common')
message: "登录成功"
});
loding: this.$Loading(); this.$closeLoading()
节点class操作:
参数 :obj为节点,className 为类名
this.$hasClass(obj,className) 是否有这个类名
this.$removeClass(obj,className) 移除类名
this.$toggleClass(obj,className) jq的toggleClass
$replaceAll 全部替换
this.$replaceAll(ctx,f,e)
ctx:所有字符串
f 要替换的字符串
e 想替换成的字符串