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 想替换成的字符串