Element UI自定義表單驗證
官方示例參考:
https://jsfiddle.net/api/post/library/pure/
插件主要代碼:
//vdt.js
const 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>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)