这次给大家带来Element UI的自定义表单验证插件的使用,使用Element UI的自定义表单验证插件注意事项有哪些,下面就是实战案例,一起来看一下。
插件主要代码:
//vdt.jsconst VDT = { messages: { required: "这是必填字段", remote: "请修正此字段", email: "请输入有效的电子邮件地址", url: "请输入有效的网址", date: "请输入有效的日期", dateISO: "请输入有效的日期 (YYYY-MM-DD)", number: "请输入有效的数字", digits: "只能输入数字", creditcard: "请输入有效的信用卡号码", equalTo: "你的输入不相同", extension: "请输入有效的后缀", minlength: "输入字数过短", maxlength: "输入字数过长", mphone: "请输入正确的手机号格式", tphone: "请输入正确的电话格式", postal: "请输入正确的邮编格式" }, required: function (value, param) { return value != undefined ? (value.toString().length > 0) : false; }, email: function (value) { return /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value); }, url: function (value) { return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(value); }, date: function (value) { return !/Invalid|NaN/.test(new Date(value).toString()); }, dateISO: function (value) { return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value); }, number: function (value) { return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value); }, digits: function (value) { return /^\d+$/.test(value); }, isarr: function (o) { return Object.prototype.toString.call(o) == '[object Array]'; }, minlength: function (value, param) { return value.length >= param; }, maxlength: function (value, param) { return value.length <= param; }, rangelength: function (value, param) { var length = $.isArray(value) ? value.length : this.getLength(value); return (length >= param[0] && length <= param[1]); }, min: function (value, param) { return value >= param; }, max: function (value, param) { return value <= param; }, range: function (value, param) { return (value >= param[0] && value <= param[1]); }, equalTo: function (value, param) { return value === param; }, mphone: function (value) { return /^1[3|4|5|8][0-9]\d{4,8}$/.test(value); }, tphone: function (value) { return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/.test(value); }, postal: function (value) { return /^[a-zA-Z0-9 ]{3,12}$/g.test(value); }, vdata: function (value, config) {//返回正确错误对象 提示 与结果 for (var fun in config) { if (typeof this[fun] == "function" && (!(config[fun].param == undefined ? this[fun](value) : this[fun](value, config[fun].param)))) { if (typeof config[fun] == "object") { return { msg: config[fun].msg ? config[fun].msg : this.messages[fun], result: false }; } else { return { msg: typeof config[fun] == "string" ? config[fun] : this.messages[fun], result: false }; } } else if (typeof config[fun] == "function") { var tmpr = config[fun](value); if (tmpr != "" && tmpr != undefined && tmpr != false) { return { msg: tmpr, result: false } } } } return { msg: "", result: true }; } };
使用(点击查看效果):
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"></head><body> <div id="app"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="活动区域" prop="region"> <el-select v-model="ruleForm.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动时间" required> <el-col :span="11"> <el-form-item prop="date1"> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker> </el-form-item> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-form-item prop="date2"> <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker> </el-form-item> </el-col> </el-form-item> <el-form-item label="即时配送" prop="delivery"> <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch> </el-form-item> <el-form-item label="活动性质" prop="type"> <el-checkbox-group v-model="ruleForm.type"> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="特殊资源" prop="resource"> <el-radio-group v-model="ruleForm.resource"> <el-radio label="线上品牌商赞助"></el-radio> <el-radio label="线下场地免费"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活动形式" prop="desc"> <el-input type="textarea" v-model="ruleForm.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </div></body><script src="./vdt.js"></script><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script> var app = new Vue({ el: '#app', data: { ruleForm: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, rules: { name: (rule, value, callback) => { var vdt = VDT.vdata(value, { "required": { msg: "请输入活动名称" }, "maxlength": { param: "5", msg: "最大值不能超过5位" }, "minlength": { param: "3", msg: "最小值不能低于3位" } }); if (!vdt.result) { callback(new Error(vdt.msg)); } else { callback(); } }, region: (rule, value, callback) => { var vdt = VDT.vdata(value, { "required":{}} ); if (!vdt.result) { callback(new Error(vdt.msg)); } else { callback(); } }, date1:(rule, value, callback) => { var vdt = VDT.vdata(value, { "required": { msg: "请选择日期" } }); if (!vdt.result) { callback(new Error(vdt.msg)); } else { callback(); } }, date2:(rule, value, callback) => { var vdt = VDT.vdata(value, { "required": { msg: "请选择日期" } }); if (!vdt.result) { callback(new Error(vdt.msg)); } else { callback(); } }, type:(rule, value, callback) => { var vdt = VDT.vdata(value, { "required": { msg: "请至少选择一个活动性质" } }); if (!vdt.result) { callback(new Error(vdt.msg)); } else { callback(); } }, resource: (rule, value, callback) => { var vdt = VDT.vdata(value, { "required": { msg: "请选择活动资源" } }); if (!vdt.result) { callback(new Error(vdt.msg)); } else { callback(); } }, desc: (rule, value, callback) => { var vdt = VDT.vdata(value, { "required": { msg: "请填写活动形式" } }); if (!vdt.result) { callback(new Error(vdt.msg)); } else { callback(); } } } }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('验证成功!'); } else { alert('验证失败!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } })</script></html>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:python3如何通过qq邮箱发送邮件
以上是Element UI的自定义表单验证插件的使用的详细内容。更多信息请关注PHP中文网其他相关文章!