1.0.18 • Published 2 years ago
kuangu-valid v1.0.18
校验插件
输入框内输入内容不规范,给出友好提示,防止垃圾信息注入。 ---kg.研发2组
一、安装
npm i kuangu-valid -S
二、Vue项目入口文件调用
在vue项目的入口文件
main.js
写入以下代码:import KgValid from 'kuangu-valid' Vue.use(KgValid);
三、组件中使用
使用到
ValidationObserver
、ValidationProvider
两个标签; 1.ValidationObserver
:包裹form表单 属性包括: ref="form" 2.ValidationProvider
:包裹具体的单个输入框 属性包括: rules(校验规则:接受字符串,多个使用‘|’拼接) v-slot="{ errors }" (错误提示列表,接受组建传出的错误提示列表) name="****"(错误提示信息中,会使用到该name) 3. 错误的提示信息通过errors0展示 4. 示例:<ValidationObserver ref="formObserver"> <el-form :model="form" label-width="120px" style="margin-right: 20px" <el-row> <ValidationProvider rules="required|custname|max:20" v-slot="{ errors }" name="客户名称" <el-form-item label="* 客户名称" prop="clientname" :error="errors[0]" <el-input placeholder="请输入客户名称" v-model="form.clientname" clearable /> </el-form-item> </ValidationProvider> </el-row> </el-form> </ValidationObserver> <div slot="footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button>取 消</el-button> </div>
data(){ return{ form:{clientname:''} } },
submitForm() { this.$refs.formObserver.validate().then((validateState) => { if (validateState) { alert(validateState); } else { alert(validateState); } }); }
5.目前已有校验规则
名称 | 说明 |
---|---|
phone | 手机号 |
tel | 座机号带区号 |
tel-no-area | 座机号不带区号 |
taxcode | 税号 |
money | 金额 |
number-point | 数字带小数点 |
custname | 企业名称 |
zh-cn | 汉字 |
username | 用户姓名(6-16位的包含大小写字母、数字、特殊符号- _ 的用户名) |
password | 密码(请输入6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种) |
positive | 正整数 |
negative | 负整数 |
pid | 身份证 |
url | 合法url |
number | 数字 |
word-num | 英文和数字 |
capital-num | 大写英文和数字 |
word-num-underline | 由数字、26个英文字母或者下划线组成的字符串 |
ch-word-num-underline | 中文、英文、数字包括下划线 |
ch-num | 中文、数字 |
ch-word-num | 中文、字母、数字 |
domain | 域名 |
money-comma | 1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须 |
excel-suffix | excel文件名 |
img-suffix | img文件名 |
ch-double-byte | 双字节字符 |
QQ号 | |
postal-code | 邮政编码 |
ip | ip |
validateSpecial | 是否包含特殊字符 |
invoice-price | 发票中单价,最多8为小数,只能为正数 |
invoice-amount | 发票中数量,最多8为小数,可为负数 |
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago