element UI中自定義表單的校驗規則

element UI的form表單提供了強大的表單校驗功能

https://element.eleme.cn/#/zh-CN/component/form

validate是對整個表單進行校驗的方法

validateField第一個參數是數組或字符串，第二個參數是回調函數，回調函數有值則表示錯誤

 

使用示例

    <section>
      <el-form ref="ruleForm"
        :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="昵稱" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>

        <el-form-item label="郵箱" prop="email">
          <el-input v-model="ruleForm.email" />
          <el-button size="mini" round @click="sendMsg">
              發送驗證碼
          </el-button>
          <span class="status">{{ statusMsg }}</span>
        </el-form-item>

        <el-form-item label="驗證碼" prop="code">
          <el-input v-model="ruleForm.code" maxlength="4" />
        </el-form-item>

        <el-form-item label="密碼" prop="pwd">
          <el-input v-model="ruleForm.pwd" type="password" />
        </el-form-item>

        <el-form-item label="確認密碼" prop="cpwd">
          <el-input v-model="ruleForm.cpwd" type="password" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="register">
              同意以下協議並注冊
          </el-button>
          <div class="error">{{ error }}</div>
        </el-form-item>
        <el-form-item>
          <a class="f1" href="http://www.meituan.com/about/terms" target="_blank">
          《用戶協議》
          </a>
        </el-form-item>
      </el-form>
    </section>

//引入加密庫crypto-js，其中包括常用於密碼加密的md5
import CryptoJS from 'crypto-js'

    data() {
        return {
            // 錯誤提醒內容
            statusMsg: '',
            error: '',
            ruleForm: {
                name: '',
                code: '',
                pwd: '',
                cpwd: '',
                email: ''
            },
            rules: {
            name: [{
                required: true,
                type: 'string',
                message: '請輸入昵稱',
                trigger: 'blur'
            }],
            email: [{
                required: true,
                type: 'email',
                message: '請輸入郵箱',
                trigger: 'blur'
            }],
            pwd: [{
                required: true,
                message: '創建密碼',
                trigger: 'blur'
            }],
            cpwd: [{
                required: true,
                message: '確認密碼',
                trigger: 'blur'
            }, {
                validator: (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('請再次輸入密碼'))
                } else if (value !== this.ruleForm.pwd) {
                    callback(new Error('兩次輸入密碼不一致'))
                } else {
                    callback()
                }
                },
                trigger: 'blur'
            }]
            }
        }
    },

    methods: {
        //發送驗證碼
        sendMsg: function () {
            const self = this;
            let namePass
            let emailPass
            // 如果60秒的發送驗證碼CD還存在，停止后續操作
            if (self.timerid) {
                return false
            }
            //校驗用戶名 (element UI的from表單中自定義校驗規則)
            //validateField第一個參數是數組或字符串，第二個參數是回調函數，
            // 回調函數有值則表示錯誤
            this.$refs['ruleForm'].validateField('name', (valid) => {
                namePass = valid
            })
            // 清空錯誤提醒內容
            self.statusMsg = ''
            // 如果用戶名校驗沒有通過，即namePass存在
            if (namePass) {
                return false
            }

            //校驗郵箱 (element UI的from表單中自定義校驗規則)
            this.$refs['ruleForm'].validateField('email', (valid) => {
                emailPass = valid
            })
            //如果用戶名通過(namePass的值不存在),且郵箱通過(emailPass的值不存在)
            if (!namePass && !emailPass) {
                self.$axios.post('/users/verify', {
                    // 中文需要編碼
                    username: encodeURIComponent(self.ruleForm.name),
                    email: self.ruleForm.email
            }).then((
                { status, data }
                ) => {
                    // 后端定義，返回的code為0表示成功，-1表示異常錯誤
                    if (status === 200 && data && data.code === 0) {
                        let count = 60;
                        self.statusMsg = `驗證碼已發送,剩余${count--}秒`
                        self.timerid = setInterval(function () {
                            self.statusMsg = `驗證碼已發送,剩余${count--}秒`
                            if (count === 0) {
                                clearInterval(self.timerid)
                            }
                        }, 1000)
                    } else {
                        //錯誤提醒內容
                        self.statusMsg = data.msg
                    }
                })
            }
        },

        //注冊
        register: function () {
            let self = this;
            //validate對整個表單進行校驗的方法
            this.$refs['ruleForm'].validate((valid) => {
            if (valid) {
                self.$axios.post('/users/signup', {
                    //中文進行編碼
                    username: window.encodeURIComponent(self.ruleForm.name),
                    // 使用crypto-js中的MD5對密碼進行加密，注意要轉為字符串
                    password: CryptoJS.MD5(self.ruleForm.pwd).toString(),
                    email: self.ruleForm.email,
                    code: self.ruleForm.code
                }).then(({
                status,
                data
                }) => {
                if (status === 200) {
                    if (data && data.code === 0) {
                    location.href = '/login'
                    } else {
                    self.error = data.msg
                    }
                } else {
                    self.error = `服務器出錯，錯誤碼:${status}`
                }
                setTimeout(function () {
                    self.error = ''
                }, 1500)
                })
            }
            })
        }
    }