参考官网:http://element.eleme.io/#/zh-CN/component/form
Form表单验证规则的封装
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email" label="邮箱" :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' } ]" > <el-input v-model="dynamicValidateForm.mobil"></el-input> </el-form-item> <el-form-item label="姓名:" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"> <el-input v-model="dynamicValidateForm.name"></el-input> </el-form-item> <el-form-item label="手机号:" prop="mobil" :rules="filter_rules({required:true,type:'mobile'})"> <el-input v-model="dynamicValidateForm.mobil"></el-input> </el-form-item> </el-form>
全局rules:
exports.install = function (Vue, options) { Vue.prototype.filter_rules = function (item){ return [{},{}] } }
main.js 注册
验证示例代码:
import { validateMoneyNumber,qq,mobile,regexn,integer} from '@/utils/validate' exports.install = function (Vue, options) { /** * 注意: 定义type 规则时 不用做非空验证 * 只需要传入 required:true 即可 * */ /*保留两位小数*/ const isvalidateMoney = (rule, value, callback) => { if(value != null && value != "") { if(!validateMoneyNumber(value)) { callback(new Error('请输入正确的数字,最多保留两位小数!')) } else { callback() } } else{ callback(); } } /*验证QQ号码*/ const isvalidateQQ= (rule, value, callback) => { if(value != null && value != "") { if(!qq(value)) { callback(new Error('您输入的QQ号不正确!')) } else { callback() } } else{ callback(); } } /*验证手机号*/ const isvalidateMobile= (rule, value, callback) => { if(value != null && value != "") { if(!mobile(value)) { callback(new Error('您输入的手机号不正确!')) } else { callback() } } else{ callback(); } } /*含有非法字符(只能输入字母、汉字)*/ const isvalidateRegexn= (rule, value, callback) => { if(value != null && value != "") { if(!regexn(value)) { callback(new Error('含有非法字符(只能输入字母、汉字)!')) } else { callback() } } else{ callback(); } } /*请输入正整数*/ const isvalidateInteger= (rule, value, callback) => { if(value != null && value != "") { if(!integer(value)) { callback(new Error('请输入正整数!')) } else { callback() } } else{ callback(); } } /** * 参数 item * required true 必填项 * maxLength 字符串的最大长度 * min 和 max 必须同时给 min < max type=number * type 手机号 mobile * 邮箱 email * 网址 url * 各种自定义类型 定义在 src/utils/validate 中 持续添加中....... * */ Vue.prototype.filter_rules = function (item){ let rules = []; if(item.required){ rules.push({ required: true, message: '该输入项为必填项!', trigger: 'blur' }); } if(item.maxLength){ rules.push({ min:1,max:item.maxLength, message: '最多输入'+item.maxLength+'个字符!', trigger: 'blur' }) } if(item.min&&item.max){ rules.push({ min:item.min,max:item.max, message: '字符长度在'+item.min+'至'+item.max+'之间!', trigger: 'blur' }) } if(item.type){ let type = item.type; switch(type) { case 'email': rules.push({ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }); break; case 'qq': rules.push( { validator: isvalidateQQ, trigger: 'blur,change' }); break; case 'mobile': rules.push( { validator: isvalidateMobile, trigger: 'blur,change' }); break; case 'regexn': rules.push( { validator: isvalidateRegexn, trigger: 'blur,change' }); break; case 'integer': rules.push( { validator: isvalidateInteger, trigger: 'blur,change' }); break; default: rule.push({}); break; } } return rules; }; };