vue - form表單驗證例項
阿新 • • 發佈:2020-12-27
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-resource.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link href="https://cdn.bootcss.com/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/element-ui/2.4.5/index.js"></script> </head> <style> #app { background-color: rgb(239, 246, 250); } </style> <body> <div id="app"> <div class="register"> <section class="form_container"> <div class="manage_tip"> <span class="title"></span> </div> <el-form :model="registerUser" :rules="rules" class="registerForm" ref="registerForm" label-width="80px"> <el-form-item label="使用者名稱" prop="name"> <el-input v-model="registerUser.name" placeholder="請輸入使用者名稱"></el-input> </el-form-item> <el-form-item label="郵箱" prop="email"> <el-input v-model="registerUser.email" placeholder="請輸入郵箱"></el-input> </el-form-item> <el-form-item label="密碼" prop="password"> <el-input v-model="registerUser.password" placeholder="請輸入密碼" type="password"></el-input> </el-form-item> <el-form-item label="確認密碼" prop="password2"> <el-input v-model="registerUser.password2" placeholder="請確認密碼" type="password"></el-input> </el-form-item> <el-form-item label="選擇身份"> <el-select v-model="registerUser.identity" placeholder="請選擇身份"> <el-option label="管理員" value="manager"></el-option> <el-option label="員工" value="employee"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" class="submit_btn" @click="submitForm('registerForm')">注 冊</el-button> </el-form-item> </el-form> </section> </div> </div> </body> <script type="text/javascript"> new Vue({ el: '#app', data() { var validatePass2 = (rule, value, callback) => { if (value !== this.registerUser.password) { callback(new Error("兩次輸入密碼不一致!")); } else { callback(); } }; return { registerUser: { name: "", email: "", password: "", password2: "", identity: "" }, rules: { // 要以陣列形式展示 name: [ { required: true, message: "使用者名稱不能為空", trigger: "change" }, { min: 2, max: 30, message: "長度在 2 到 30 個字元", trigger: "blur" } ], email: [ { type: "email", required: true, message: "郵箱格式不正確", trigger: "blur" } ], password: [ { required: true, message: "密碼不能為空", trigger: "blur" }, { min: 6, max: 30, message: "長度在 6 到 30 個字元", trigger: "blur" } ], password2: [ { required: true, message: "確認密碼不能為空", trigger: "blur" }, { min: 6, max: 30, message: "長度在 6 到 30 個字元", trigger: "blur" }, { validator: validatePass2, trigger: "blur" } ] } } }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { this.$message({ message: "註冊成功!", type: "success" }); } else { this.$message({ message: "註冊失敗!", type: "error" }); } }); } } }); </script> </html>