Vue使用rules对表单字段进行校验

欢迎一起讨论

Geooo的个人博客：https://geooo.gitee.io/geoooblog/

环境：基于 Vue + ElementUI

1. 在 el-form 标签内添加 rules 属性 ，并在<el-form-item> 内添 prop 属性去对应 rules 中的规则

<el-form :model="form" :rules="rules" ref="form" lable-width="100px"> <el-form-item label="商品ID" prop="id" > <el-input v-model="form.id" placeholder="输入订单号" clearable></el-input> </el-form-item> <el-form-item lable="商品名称" prop="name"> <el-input v-model="form.name" placeholder="输入商品名称" clearble></el-input> </el-form-item> <el-form-item lable="商品分类" prop="sort"> <el-input v-model="form.sort" placeholder="选择商品分类" clearble></el-input> </el-form-item> <el-form-item lable="商品数量" prop="count"> <el-input v-model="form.count" placeholder="选择商品数量" clearble></el-input> </el-form-item> </el-form> 

2. 创建一个约束函数( validate.js ) 定义验证规则

/* 是否是公司邮箱*/ export function isWscnEmail(str) { const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i; return reg.test(str.trim()); } /* 合法uri*/ export function validateURL(textval) { const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?‘\\+&%$#=~_-]+))*$/; return urlregex.test(textval); } // 验证是否整数 export function isInteger(rule,value,callback) { if (!value) { return callback(new Error(‘输入不可以为空‘)); } setTimeout(() => { if (!Number(value)) { callback(new Error(‘请输入正整数‘)); } else { const re = /^[0-9]*[1-9][0-9]*$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error(‘请输入正整数‘)); } else { callback(); } } },1000); } // 验证是否是[0-1]的小数 export function isDecimal(rule,callback) { if (!value) { return callback(new Error(‘输入不可以为空‘)); } setTimeout(() => { if (!Number(value)) { callback(new Error(‘请输入数字‘)); } else { if (value < 0 || value > 1) { callback(new Error(‘请输入[0,1]之间的数字‘)); } else { callback(); } } },1000); } // 验证端口是否在[0,65535]之间 export function isPort(rule,callback) { if (!value) { return callback(new Error(‘输入不可以为空‘)); } setTimeout(() => { if (value == ‘‘ || typeof(value) == undefined) { callback(new Error(‘请输入端口值‘)); } else { const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error(‘请输入在[0-65535]之间的端口值‘)); } else { callback(); } } },1000); } /* 小写字母*/ export function validateLowerCase(str) { const reg = /^[a-z]+$/; return reg.test(str); } 

3.在我们当前vue页面引入 validate.js 验证规则文件，在export default中定义rules规则，使用语法为： {validate:验证方法,trigger: 触发条件}

import { isInteger } from ‘../../util/validate.js‘; //引入规则验证js export default { name: ‘buyDetail‘,data(){ form: { id: ‘‘,name: ‘‘,sort: ‘‘,count: ‘‘,},rules: { id: [{ require: true,message: ‘请输入商品ID‘,trigger: ‘blur‘},{ validate: ‘isInteger‘,trigger: ‘blur‘}],name: [{ require: true,message: ‘请输入商品名称‘},sort: [{ require: true,message:‘请输入商品分类‘,trigger:‘blur‘}],count: [{ require: true,message:‘请输入商品数量‘,{ validate:‘isInteger‘,trigger:‘blur‘}] },} }