更新记录
0.1.0(2021-06-08) 下载此版本
初版
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
- | - | √ | √ | √ | √ | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | - | - | - | √ | - | √ | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
说明
ive-validate是针对表单校验的封装的方法,通过传入固定格式的数据对其进行校验,返回一个Promise对象并且简化对象获取其中的值进行表单提交
ive-validate方法说明:
参数 | 说明 | 默认值 | 备注 |
---|---|---|---|
data | 固定格式的数据 | {} |
data 格式示例:
{ phone: { value: "", rules: [ { required: true, message: "请填写手机号码!", }, { pattern: "/^1(3|4|5|7|8|9|6)\d{9}$/i", message: "请输入正确的手机号码!", }, { validate: () => { return /^1(3|4|5|7|8|9|6)\d{9}$/.test(this.formData.phone.value) } } ], }, captcha: { value: "", rules: [ { required: true, message: "请填写验证码", }, { pattern: /^[\w\d]+$/i, message: "请输入正确的验证码", }, ], }
rules数组项目说明:校验不通过,reject({errCode: 0, msg: '校验失败'})
key值 | 类型 | 说明 | 备注 |
---|---|---|---|
required | Boolean | 是否必填 | 当对应数据的value值为空的时候则校验不通过 |
pattern | RegExp或者String | 数据校验的正则(可以为字符串) | 尽量不要在父子组件中共享该数据,如果确实有共享,pattern格式请使用字符串代替 |
validate | Function | 数据校验的方法 | validate返回值为true表示校验通过,否正校验不通过. 注意不要在父子组件中共享该数据 |
使用(加入button中绑定了validate方法)
'<input type="text" v-model="formData.pwd.value" placeholder="输入密码" />' '<button class="sub_btn" @click="submit">'
methods: { submit() { validate(this.formData).then(requestData => { ajax({ data: requestData, url:'http://test.xxx.com/test' }) }).catch(err => { if(err.errCode === 0) { alert(err.msg, 'error'); } }); } }