Dieses Mal werde ich Ihnen die Verwendung des benutzerdefinierten Formularvalidierungs-Plugins vorstellen. Was sind die Vorsichtsmaßnahmen , wenn Sie das benutzerdefinierte Formularvalidierungs-Plugin von Element UI verwenden? ist ein praktischer Fall, werfen wir einen Blick darauf.
Hauptcode des Plug-Ins:
//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 };
}
};Nach dem Login kopieren
Verwendung (klicken Sie, um den Effekt zu sehen):
<!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>Nach dem Login kopieren
Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre: So senden Sie E-Mails über das QQ-Postfach in Python3
Wie NodeJS Single Sign-On implementiert Demo über JSONP
Das obige ist der detaillierte Inhalt vonVerwendung eines benutzerdefinierten Formularvalidierungs-Plug-ins für Element UI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
