elemento de la interfaz de usuario de Verificación de reglas definidas en la forma

La forma de elemento de formulario de interfaz de usuario ofrece una potente función de validación de formularios

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

validar un método para el control de todo el formulario

primer parámetro validateField es una cadena o matriz, el segundo parámetro es la devolución de llamada, la función de devolución de llamada con un valor indica un error

 

Ejemplos de Uso

    <sección> 
      <el-forma ref = "ruleForm" 
        : modelo = "ruleForm": reglas = "reglas" etiqueta-width = "100px" class = "demo ruleForm"> 
        <label-form-elemento EL = "昵称" prop = "name"> 
          <el-entrada v-modelo = "ruleForm.name" /> 
        </-form-ítem el> 

        <label-form-elemento EL = "邮箱" prop = "email"> 
          <el-entrada v-modelo = "ruleForm.email" /> 
          <tamaño el-botón = "mini" @ ronda clic = "sendmsg"> 
              发送验证码
          <el-botón /> 
          <span class = "status"> {{}} statusMsg </ span> 
        </-form-ítem el> 

        <label-form-elemento EL = "验证码" prop = "código"> 
          <el-entrada v-modelo = maxlength "ruleForm.code" = "4" /> 
        </ el-formulario -Item>

        <label-form-elemento EL = "密码" prop = "pwd"> 
          <el-entrada v-modelo = "ruleForm.pwd" type = "contraseña" /> 
        <-form-elemento EL /> 

        <el-form- etiqueta del elemento = "确认密码" prop = "CPWD"> 
          <el-entrada v-modelo = "ruleForm.cpwd" type => "contraseña" / 
        </-form-ítem el> 

        <-form-ítem el> 
          <EL tipo -botón = "primaria" @ Haga clic = "registro"> 
              同意以下协议并注册
          <el-botón /> 
          <div class = "error"> {{error}} </ div> 
        </ el-forma-item> 
        <el-forma-item> 
          <a class ="f1" href = "http://www.meituan.com/about/terms" target = "_ blank"> 
          "用户协议" 
          </a> 
        </ el-form-item> 
      </ el-form> 
    </ section>

// biblioteca de cifrado introducción de cripto-js, incluyendo comúnmente utilizada para el cifrado de la contraseña MD5 
Importar de CryptoJS 'CryptoJS'

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