官网地址:https://v1.uviewui.com
表单校验的规则注意点:
uView自带验证规则
常用的手机号身份证之类的都可以直接用内置校验规则地址
使用方法:
this.$u.test.mobile(val)
如果是动态配置的表单,使用v-for循环,校验规则不确定是否必填可以在validator函数判断
rules:{
idCard: [{
validator: (rule, value, callback) => {
// 判断是否必填
let isRequired = this.getIsRequired('idCard') //获取是否必填
if (isRequired) {
if (!value) {
callback('请输入身份证号')
} else {
callback()
}
} else {
callback()
}
},
trigger: ['change', 'blur'],
},
{
validator: (rule, value, callback) => {
return this.$u.test.idCard(value)
},
message: '请输入正确的身份证号码',
trigger: ['change', 'blur'],
}
],
}
表单:
<u-form :model="form" ref="uForm" :rules="rules" class="form_content" :label-width="260">
<template v-for="(item,index) in applyConfigList">
<view class="mlr-30" :key="index">
<u-form-item :label="item.label" :required="item.isReuired" :prop="item.field">
<u-input placeholder="请输入" v-model="form[item.field]" />
</u-form-item>
</view>
</template>
</u-form>
其余的其它属性看官网吧,切记rules一定要写正确,要不他提交的时候this.$refs.uForm.validate()点击没有反应,一直不能触发。