element UI Verification rules defined in the form

The form form element UI provides a powerful form validation function

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

validate a method for checking the entire form

validateField first parameter is a string or array, the second parameter is the callback, the callback function with a value indicates an error

 

Examples of Use

    <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>

// encryption library introducing crypto-js, including commonly used for password encryption MD5 
Import from CryptoJS '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)
                })
            }
            })
        }
    }