.vue文件內容如下:
<template>
<div>
<el-button type="text" @click="dialogFormVisible = true">驗證</el-button>
<el-dialog title="驗證管理員key" :visible.sync="dialogFormVisible" :modal="true" width="600px" :fullscreen="false" @open="openDialog" @close="closeDialog">
<el-form status-icon :model="form" :rules="rules" ref="ruleForm" size="small" label-width="100px">
<el-form-item label="賬號" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="證書等級" prop="certlvl">
<el-select v-model="form.certlvl" style="width:100%">
<el-option label="一級" value="1"></el-option>
<el-option label="二級" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="PIN碼" prop="pin">
<el-input type="password" v-model="form.pin"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="resetForm('ruleForm')">取 消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
var validateName = (rule, value, callback) => {
if(value === ""){
callback(new Error("請輸入用戶名!"))
}else if(value.length < 6){
callback(new Error("用戶名必須大於5個字符"));
}
}
let regexp = /^[0-9]+$/;
var validatePin = (rule, value, callback) => {
if(value === ""){
callback(new Error("PIN碼不能爲空!"))
}else if(!regexp.test(value)){
callback(new Error("PIN碼只能爲數字"));
}
}
return {
dialogFormVisible: false,
rules: {
name: [
{ validator: validateName, trigger: "blur" },
{ required: true, trigger: "blur" }
],
certlvl: [
{ required: true, message: "請選擇證書等級", trigger: "change" }
],
pin: [
{ validator: validatePin, trigger: "blur" },
{ required: true, trigger: "blur" }
]
},
form: {
name: "",
certlvl: "",
pin: ""
}
};
},
methods: {
handleClose(done) {
this.$confirm("確認關閉?")
.then(_ => {
done();
})
.catch(_ => {});
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.dialogFormVisible = false;
console.log("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.dialogFormVisible = false;
this.$refs[formName].resetFields();
},
openDialog(){
this.form.name = "123456";
this.form.certlvl = "1";
this.form.pin = "123456";
},
closeDialog(){
this.$refs['ruleForm'].resetFields()
}
}
};
</script>
<style scoped>
</style>