https://blog.csdn.net/frank_fong/article/details/98486989
https://segmentfault.com/q/1010000020201436?utm_source=tag-newest
<!DOCTYPE html>
<html lang="zh-CN">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>elementUI</title>
? ? <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
? ? <link rel="stylesheet" >
? ? <script src="https://unpkg.com/element-ui/lib/index.js"></script>
? ? <style>
? ? ? ? #app {
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? margin: 30px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="app">
? ? ? ? <el-form :model="myModel" :rules="rules" ref="myForm" size="small" label-width="100px">
? ? ? ? ? ? <el-form-item label="姓名" prop="name">
? ? ? ? ? ? ? ? <el-input v-model="myModel.name" clearable></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item label="郵箱" prop="email">
? ? ? ? ? ? ? ? <el-input v-model="myModel.email" clearable></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item>
? ? ? ? ? ? ? ? <el-button type="warning" size="medium" @click="validateEmail('myForm')">驗證字段</el-button>
? ? ? ? ? ? ? ? <el-button type="primary" size="medium" @click="submitForm('myForm')">驗證全部</el-button>
? ? ? ? ? ? </el-form-item>
? ? ? ? </el-form>
? ? </div>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el: "#app",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? myModel: {
? ? ? ? ? ? ? ? ? ? name: '',
? ? ? ? ? ? ? ? ? ? email: ''
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? rules: {
? ? ? ? ? ? ? ? ? ? name: {
? ? ? ? ? ? ? ? ? ? ? ? required: true,
? ? ? ? ? ? ? ? ? ? ? ? message: '請輸入姓名',
? ? ? ? ? ? ? ? ? ? ? ? trigger: ['change', 'blur']
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? email: {
? ? ? ? ? ? ? ? ? ? ? ? required: true,
? ? ? ? ? ? ? ? ? ? ? ? message: '請輸入郵箱',
? ? ? ? ? ? ? ? ? ? ? ? trigger: ['change', 'blur']
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? validateEmail(formName) {
? ? ? ? ? ? ? ? ? ? this.$refs[formName].validateField('email', emailError => {
? ? ? ? ? ? ? ? ? ? ? ? if (!emailError) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? alert('郵箱驗證通過!');
? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log('郵箱驗證失敗');
? ? ? ? ? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? submitForm(formName) {
? ? ? ? ? ? ? ? ? ? this.$refs[formName].validate((valid) => {
? ? ? ? ? ? ? ? ? ? ? ? if (valid) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? alert('submit!');
? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log('error submit!!');
? ? ? ? ? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
————————————————
版權(quán)聲明：本文為CSDN博主「FrankFang7」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/frank_fong/article/details/98486989
