前言
使用uni-app开发小程序，因为没有使用插件，只能自己手动写校验
思路
第一时间考虑就是写一个自定义指令，这个指令包含两个功能，双向数据绑定和校验；
但实际操作发现uni-app不允许使用自定义指令；
因此，改用手动校验比较low的方法，此方法参考了element的校验规范，目前只是简单实现，后续会完善此方法
以下是实现流程
封装一个公共js——需要校验时，传入校验值和rules——校验失败（提示+返回false）——校验成功（返回true）
代码
公共校验js
创建一个rules.js的公共文件
function rules(info,rule) {
for(var i in rule){
// 判断rule和info的值是否是一一对于
if(info[i] === undefined){
console.log(`传入的数据没有${
i}`)
// 不对应则跳过，没有验证此跳过方法
// continue
return false
}
for(let j=0;j<rule[i].length;j++){
// 判断是否是必填项
if(rule[i][j].required){
if(info[i] == ''){
uni.showToast({
title: rule[i][j].message || '校验不通过',
icon: 'none'
})
return false
}
}
//判断最小输入值min
if(rule[i][j].min){
if(info[i].length < rule[i][j].min){
uni.showToast({
title: rule[i][j].message || '校验不通过',
icon: 'none'
})
return false
}
}
//判断最大输入值max
if(rule[i][j].max){
if(info[i].length > rule[i][j].max){
uni.showToast({
title: rule[i][j].message || '校验不通过',
icon: 'none'
})
return false
}
}
// 正则判断pattern
if(rule[i][j].pattern){
if(!rule[i][j].pattern.test(info[i])){
uni.showToast({
title: rule[i][j].message || '校验不通过',
icon: 'none'
})
return false
}
}
}
}
return true
}
module.exports = rules
因为小程序项目不大，用不上那么多校验，因此目前只写了最大值，最小值，必填项和正则四种方法，你们可以根据需求自己新增校验规则
挂载公共方法
把公共方法挂载到vue上
在main.js处
import rules from '@/utils/rules.js'
// 校验规则
Vue.prototype.$rules = rules
校验代码使用
data() {
return {
cpledgeOrderDetail: {
handleType: '',
carNo: '',
custName: '',
custPhone: '',
provinceCode: '',
cityCode: '',
city:'',
province:'',
vehicleAdministrative: '',
remark: '',
finishTime: '',
juridicalPerson:'',
businessNumber:''
},
rules:{
city:[
{
required: true, message: '办理城市不能为空' }
],
finishTime:[
{
required: true, message: '预约办理时间不能为空' }
],
businessNumber:[
{
required: true, message: '申请办理笔数不能为空' },
{
max: 9, message: '申请办理笔数不能超过999999999' }
],
custName:[
{
required: true, message: '车主/联系人名字不能为空' },
{
pattern: /^([\u4e00-\u9fa5]){2,6}$/,
message: '车主/联系人姓名的限制为2-6中文!'
}
],
custPhone:[
{
required: true, message: '车主/联系人电话不能为空' },
{
pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
message: '请填写有效手机号'
}
]
}
}
},
methods: {
formOk(){
if(this.$rules(this.cpledgeOrderDetail,this.rules)){
uni.showLoading({
title:"提交中..."
})
//请求，此请求是经过封装的，不要疑为什么是res[1]，把请求换成自己的
this.$serve.post('orderEdit',this.cpledgeOrderDetail).then(res=>{
if(res[1]){
uni.hideLoading()
uni.navigateBack({
delta: 1
})
}
})
}
}
}
| 参数 | 定义 | 默认值 |
|---|---|---|
| required | 是否是必填项 | - |
| max | 输入的最大值，一般和min混合使用 | - |
| min | 输入的最小值，一般和max混合使用 | - |
| pattern | 正则校验规则 | - |
| message | 校验失败的提示词 | 校验不通过 |