uniapp表单验证组件,用法基本与element ui中的el-form一致,实现了el-form中比较常用的方法
测试过微信小程序、app(非nvue模式)、h5
npm install async-validator --save
参考github demo中的用法及注意点
onLoad() {
// 这里必须放在$nextTick中,不然h5会找不到this.$refs.form
this.$nextTick(() => {
this.$refs.form.setRules(this.rules)
})
}
data(){
return{
rules:{
phone: [{
required: true,
message: '请输入手机号'
},
{
validator: (rule, value, callback) => {
// 注意这里如果用的是methods里的isMobilePhone将不生效
if (this.$utils.isMobilePhone(value)) {
callback()
} else {
callback(new Error('手机号格式不正确'))
}
}
}]
}
}
}
data(){
return{
rules:{
phone: [{
required: true,
message: '请输入手机号'
},
{
validator: this.isMobilePhone
}]
}
}
},
methods:{
isMobilePhone(rule,value,callback){
if (this.$utils.isMobilePhone(value)) {
callback()
} else {
callback(new Error('手机号格式不正确'))
}
}
}
错误
data(){
return{
info:{}
}
}
正确
data(){
return{
info:{
name: '',
email: '',
desc: '',
phone: ''
}
}
}
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
model | 表单的数据对象 | object | - | - |
labelStyle | label的样式 | object | - | - |
hideRequiredAsterisk | 是否隐藏必填的*号 | boolean | - | false |
方法名 | 说明 | 参数 |
---|---|---|
validate | 对整个表单的校验方法,参数为一个回调函数,传入一个参数,表示校验是否通过 | Function(callback: Function(boolean)) |
setRules | 设置表单的校验规则,参数为需要传入的校验规则 | rules:array,rules配置规则参考async-validator |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
prop | 表单域 model 字段 | string | 传入 Form 组件的 model 中的字段 | - |
labelStyle | label的样式 | object | - | - |
label | 标签文本 | string | - | - |
contentStyle | label右侧内容的样式 | object | - | - |
name | 说明 |
---|---|
formItem | form-item自定义内容,如果用到这个slot,则代表完全自定义form-item内容,组件将不会处理label,必填*号等 |