Validator 表单验证 
概述
Validator 表单验证，提供了常用的表单校验方法，支持传入自定义校验方法。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 引入
在页面中script标签内顶部引入
import form from '@/components/firstui/fui-validator/fui-validator'
1
# 代码演示
基本使用
通过点击按钮执行 submit 方法。
<fui-input required label="姓名" borderTop placeholder="请输入姓名" v-model="formData.name"></fui-input>
<fui-input required label="手机号" placeholder="请输入手机号码" v-model="formData.mobile"></fui-input>
<view class="fui-btn__box">
<fui-button text="Submit" bold @click="submit"></fui-button>
</view>
1
2
3
4
5
2
3
4
5
//校验规则
const rules = [{
name: "name",
rule: ["required"],
msg: ["请输入姓名"]
}, {
name: "mobile",
rule: ["required", "isMobile"],
msg: ["请输入手机号", "请输入正确的手机号"]
}];
//表单data数据
formData: {
name: '',
mobile: ''
}
//methods
submit() {
console.log(this.formData)
let res = form.validator(this.formData, rules);
console.log(res)
if (res.isPassed) {
this.fui.toast('校验通过！')
} else {
this.fui.toast(res.errorMsg)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# Methods
| 方法名 | 说明 | 传入参数 | 返回参数 |
|---|---|---|---|
| validator | 表单验证方法 | formData : Object 表单数据 rules : Array 校验规则数据 checkAll : 是否校验所有元素 | { isPassed : 是否验证通过 errorMsg : 错误消息 } |
/*
单校验方法参数详细说明
@param formData 表单数据对象
@param rules 表单验证规则
@param checkAll 是否校验所有元素 （V1.7.0+ 支持）
*/
validator: function(formData, rules, checkAll = false)
/*
=======================
formData：Object 表单数据，格式 {key:value,key:value}
rules：Array<Object> 校验规则数据，格式 [{name:value,rule:[],msg:[],validator:[]}]
-------------------
name：String，元素的名称，与formData中key一致
rule：Array<String> ，内置的校验方法名称集合，详细见下方说明
msg：Array<String>，对应rule规则方法的错误提示信息
validator：Array<Object>，自定义校验方法集合，格式 [{msg:'出错后提示信息',method:Function 校验法法}]
-----------
method：校验方法约定必须返回 true 或 false 作为校验结果
checkAll：Boolean 是否校验所有元素并返回所有错误信息。 （V1.7.0+ 支持）
=======================
*/
// rule 内置校验方法名称详细说明。组合使用，如：['required','isMobile']
/*
=======================
required：必填项。非必填情况下，如果值为空则不进行校验
isMobile：是否为手机号码
isEmail：是否为邮箱
isCarNo：是否为车牌号
isIdCard：是否为身份证号
isAmount：是否为金额，允许保留两位小数
isNumber：是否为数字
isChinese：是否全为中文
isNotChinese：是否不包含中文，可以有特殊字符
isEnglish：是否为英文
isEnAndNo：是否为英文和数字组合 4~30 位
isEnOrNo：只包含英文或者数字
isSpecial：是否有特殊字符，若有则返回false
isEmoji：是否有表情符号，若有则返回false
isDate：是否为日期：2021-08-09
isUrl：是否为URL地址
isSame：与某个key值是否相同，传值：'isSame:key'，不相同则返回false
range：数值范围，传值：'range:[1,9]'
minLength：最小长度，传值：'minLength:Number'，如：'minLength:1'
maxLength：最大长度，传值：'maxLength:Number'，如：'maxLength:149'
isKeyword：是否包含关键词，多个以英文逗号分隔，包含则返回false。传值：'isKeyword:key1,key2'
=======================
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。← Utils 工具类 Layout 布局内容 →