javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > uniapp表单校验

uniapp表单校验超详细讲解

作者：千里及

这篇文章主要给大家介绍了关于uniapp表单校验的相关资料,Uni-app内置了一些表单验证方法,可以帮助我们对表单进行有效的验证,需要的朋友可以参考下

uni-forms表单校验

1、uni-forms 需要通过rules属性传入约定的校验规则。

2、uni-forms 需要绑定model属性，值为表单的key/value组成的对象

3、uni-forms-item 需要设置name 属性为当前字段名，字段为String|Array类型

4、只要使用的组件不管内置组件还是三方组件，只需绑定v-model，无需其他操作

5、如果使用原生checkbox或三方组件不支持v-model等，只需要给罪案绑定binddata方法即可出发表单校验，无需绑定事件到methods中

6、binddata('name',$event.detail.value,'form')方法接受三个值，

第一个参数传入当前表单组件所在的name，同当前父组件uni-forms-item 绑定属性name的值

第二个参数传入需要校验的值，内置 组件可以通过$event.detail.value 获取到组件的返回值，自定义组件传入需要校验的值即可

第三个参数传入uni-forms组件绑定属性ref的值，通常在多表单的时候需要传入，用来区分表单，如页面中仅有一个uni-forms可忽略

7、如果内置binddata方法无法满足需求，在当前页面的methods中复写此方法即可，复写此方法需要调用uni-forms的setValue来触发表单校验

<template>
    <view>
        <uni-forms ref="form" :modelValue="formData" :rules="rules">
            <uni-forms-item label="姓名" name="name">
                <uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
            </uni-forms-item>
            <uni-forms-item label="邮箱" name="email">
                <input class="input" v-model="formData.email" type="text" placeholder="请输入用户名" @input="binddata('email',$event.detail.value)" />
            </uni-forms-item>
        </uni-forms>
        <button @click="submit">Submit</button>
    </view>
</template>
<script>
export default {
    data() {
        return {
            // 表单数据
            formData: {
                name: 'LiMing',
                email: 'dcloud@email.com'
            },
            rules: {
                // 对name字段进行必填验证
                name: {
                    rules: [{
                            required: true,
                            errorMessage: '请输入姓名',
                        },
                        {
                            minLength: 3,
                            maxLength: 5,
                            errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
                        }
                    ]
                },
                // 对email字段进行必填验证
                email: {
                    rules: [{
                        format: 'email',
                        errorMessage: '请输入正确的邮箱地址',
                    }]
                }
            }
        }
    },
    methods: {
        /**
         * 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
         * @param {String} name 字段名称
         * @param {String} value 表单域的值
         */
        // binddata(name,value){
        // 通过 input 事件设置表单指定 name 的值
        //   this.$refs.form.setValue(name, value)
        // },
        // 触发提交表单
        submit() {
            this.$refs.form.validate().then(res=>{
                console.log('表单数据信息：', res);
            }).catch(err =>{
                console.log('表单错误信息：', err);
            })
        }
    }
}
</script>

校验规则说明

校验规则接受一个Object类型的值，通过传入不同的规则来表示每个表单域的值该如何校验

对象的key表示当前表单域的字段名，value为具体的校验规则

以下为value所包含的内容

属性名

类型

说明

rules

Array

校验规则，下方rules属性说明

validateTrigger

String

表单校验时机【1.4.0】已废弃

label

String

当前表单域的字段中文名，多用于errMessage的显示，可以不填

rules: {
    // 对name字段进行必填验证
    name: {
        // name 字段的校验规则
        rules:[
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: '请填写姓名',
            },
            // 对name字段进行长度验证
            {
                minLength: 3,
                maxLength: 5,
                errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
            }
        ],
        // 当前表单域的字段中文名，可不填写
        label:'姓名',
        validateTrigger:'submit'
    }
}

rules 属性说明

每一个验证规则中，可以配置多个属性，下面是一些常见规则属性

属性名

类型

默认值

可选值

说明

required

Boolean

-

-

是否必填，配置此参数不会显示输入框左边的必填星号，如需要，请配置uni-forms-item组件的的required为true

range

Array

-

-

数组至少要有一个元素，且数组内的每一个元素都是唯一的。

format

String

-

-

内置校验规则，如这些规则无法满足需求，可以使用正则匹配或者自定义规则

pattern

RegExp

-

-

正则表达式，注意事项见下方说明

maximum

Number

-

-

校验最大值(大于)

minimum

Number

-

-

校验最小值(小于)

maxLength

Number

-

-

校验数据最大长度

errorMessage

String

-

-

校验失败提示信息语，可添加属性占位符，当前表格内属性都可用作占位符

validateFunction

Function

-

-

自定义校验规则

format属性值说明

属性名

说明

string

必须是 string 类型，默认类型

number

必须是 number 类型

boolean

必须是 boolean 类型

array

必须是 array 类型

object

必须是 object 类型

url

必须是 url 类型

email

必须是 email 类型

validateFunction 自定义校验规则使用说明

validateFunction 方法返回四个参数 validateFunction:function(rule,value,data,callback){} ，当然返回参数名开发者可以自定义：

rule : 当前校验字段在 rules 中所对应的校验规则

value : 当前校验字段的值

data : 所有校验字段的字段和值的对象

callback : 校验完成时的回调，一般无需执行callback，返回true(校验通过)或者false(校验失败)即可 ，如果需要显示不同的 errMessage，如果校验不通过需要执行 callback('提示错误信息')，如果校验通过，执行callback()即可

<template>
    <view>
        <uni-forms ref="form" :modelValue="formData">
            <uni-forms-item label="兴趣爱好" required name="hobby">
                <uni-data-checkbox v-model="formData.hobby" multiple :localdata="hobbys" />
            </uni-forms-item>
        </uni-forms>
        <button class="button" @click="submit">校验表单</button>
    </view>
</template>
<script>
export default {
    data() {
        return {
            formData:{
            },
            rules: {
                hobby: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择兴趣',
                    },{
                        validateFunction:function(rule,value,data,callback){
                            if (value.length < 2) {
                                callback('请至少勾选两个兴趣爱好')
                            }
                            return true
                        }
                    }]
                }
            }
        }
    },
    onReady() {
        // 需要在onReady中设置规则
        this.$refs.form.setRules(this.rules)
    },
    methods: {
        submit(form) {
            this.$refs.form.validate().then(res=>{
                console.log('表单数据信息：', res);
            }).catch(err =>{
                console.log('表单错误信息：', err);
            })
        }
    }
}
</script>

validateFunction 异步校验

上面的自定义校验方式为同步校验 ，如果需要异步校验，validateFunction 需要返回一个 Promise ，校验不通过 执行 reject(new Error('错误信息')) 返回对应的错误信息，如果校验通过则直接执行 resolve() 即可，在异步校验方法中，不需要使用 callback 。

<template>
    <view>
        <uni-forms :modelValue="formData" ref="form">
            <uni-forms-item name="age" label="年龄">
                <uni-easyinput v-model="formData.age" type="text" placeholder="请输入年龄" />
            </uni-forms-item>
        </uni-forms>
        <button class="button" @click="submit">校验表单</button>
    </view>
</template>
<script>
export default {
    data() {
        return {
            formData:{
                age:''
            },
            rules: {
                age: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入年龄',
                    },{
                        validateFunction: (rule, value, data, callback) => {
                            // 异步需要返回 Promise 对象
                            return new Promise((resolve, reject) => {
                                setTimeout(() => {
                                    if (value > 10 ) {
                                        // 通过返回 resolve
                                        resolve()
                                    } else {
                                        // 不通过返回 reject(new Error('错误信息'))
                                        reject(new Error('年龄必须大于十岁'))
                                    }
                                }, 2000)
                            })
                        }
                    }]
                }
            }
        }
    },
    onReady() {
        // 需要在onReady中设置规则
        this.$refs.form.setRules(this.rules)
    },
    methods: {
        /**
         * 表单提交
         * @param {Object} event
         */
        submit() {
            uni.showLoading()
            this.$refs.form.validate().then(res => {
                uni.hideLoading()
                console.log('表单数据信息：', res);
            }).catch(err => {
                uni.hideLoading()
                console.log('表单错误信息：', err);
            })
        }
    }
}
</script>

动态表单校验

多用于同一个字段需要添加多次的场景，如需要动态创建多个域名参与检验。

总结 

到此这篇关于uniapp表单校验的文章就介绍到这了,更多相关uniapp表单校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文