更新记录
0.0.1(2020-08-18) 下载此版本
h5端测试可用,小程序端没有测试,慎用!!!
平台兼容性
本组件依赖于async-validator包,如未安装请先安装:
npm i async-validator
示例代码:
<template>
<view class="content">
<validator-form ref="form" :model="form" :rules="rules">
<validator-form-item prop="input">
<input type="text" v-model="form.input">
</validator-form-item>
<button type="primary" @click="submit">提交</button>
</validator-form>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
form: {
input: ''
},
rules: {
// 对应validator-form-item组件的prop的绑定属性
input: [
{
required: true, // 必填
message: '请填写input'
}
]
}
}
},
onLoad() {
},
methods: {
beforeSubmit (e) {
},
submit (){
// 触发验证
this.$refs.form.validate(valid => {
if (valid) {
} else {
}
})
}
}
}
</script>
<style>
page{
padding: 30upx;
}
input{
border-bottom: 1px solid #666;
}
// 自定义组件样式
/deep/.form-item{
display: block;
margin-bottom: 40upx;
}
</style>
更多验证方法可参考async-validator官方文档