Tabla de contenido
Prefacio
Use uni-app para desarrollar pequeños programas, ya que no hay un complemento, solo puede escribir la verificación manualmente
Ideas
La primera consideración es escribir un comando personalizado, este comando contiene dos funciones, enlace de datos bidireccional y verificación;
pero en la operación real, se encuentra que uni-app no permite el uso de comandos personalizados;
por lo tanto, use la verificación manual para comparar bajo Método. Este método se refiere a la especificación de verificación del elemento. Es simple de implementar en la actualidad. Este método se mejorará en el futuro. El
siguiente es el proceso de implementación para
encapsular un js público cuando se necesita verificación, pasar el valor de verificación y las reglas-la verificación falla (Prompt + return false) -verification es exitosa (return true)
Código
Js de verificación pública
Crea un archivo público de 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
Debido a que el proyecto del programa pequeño no es grande y no requiere tantas verificaciones, actualmente solo se escriben cuatro métodos para el valor máximo, el valor mínimo, los elementos requeridos y la regularidad. Puede agregar reglas de verificación según sus necesidades.
Montar métodos públicos
Monte el método público para vue
en main.js
import rules from '@/utils/rules.js'
// 校验规则
Vue.prototype.$rules = rules
Verificar el uso del código
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
})
}
})
}
}
}
| parámetro | definición | Defaults |
|---|---|---|
| requerido | ¿Es necesario? | - |
| max | El valor máximo ingresado, generalmente mezclado con min | - |
| min | El valor mínimo de la entrada, generalmente mezclado con max | - |
| patrón | Regla de verificación regular | - |
| mensaje | Palabra de aviso para error de verificación | Verificación fallida |