(vue.js)element ui 表单验证 this$refs[formName]validate里面的内容死活不执行_Web开发_编程问答

(vue.js)element ui 表单验证 this$refs[formName]validate里面的内容死活不执行

来源:互联网  时间:2017/6/20 0:26:34

关于网友提出的“ (vue.js)element ui 表单验证 this$refs[formName]validate里面的内容死活不执行”问题疑问,本网通过在网上对“ (vue.js)element ui 表单验证 this$refs[formName]validate里面的内容死活不执行”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

问题: (vue.js)element ui 表单验证 this$refs[formName]validate里面的内容死活不执行
描述:


123可以打出来,但是函数里面的内容就打不出来,不知道为什么


解决方案1:

你这个,先看看this.$refs[formName]是不是Undefined

解决方案2:

vue element-ui使用自定义正则表达式:

let validatePass = (rule, value, callback) => {
     let regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
     if (value === '') {
        callback(new Error('请输入密码'))
     } else if (regExp.test(value) === false) {
       callback(new Error('8-16字母和数字组成,不能是纯数字或纯英文'))
     } else {
        if (this.ruleForm.repass !== '') {
          this.$refs.ruleForm.validateField('repass')
        }
          callback()
     }
}

注册提交按钮事件:

submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let _this = this
            this.$ajax.post('请求地址', _this.ruleForm)
              .then((response) => {
                this.$message.success('注册成功!')
                this.$refs[formName].resetFields()
                //  跳转到登录页
                this.$router.push({path: '/'})
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
}

全套完整代码:[vuejs+element ui+ssm+maven实现登陆注册功能(有完整源码下载)

解决方案3:

<template>
    <div>
        <el-form :rules="rules" :model="testInfo" ref="testForm">
            <el-form-item props="test1">
                <el-input v-model="testInfo.test1"></el-input>
            </el-form-item>
            <el-form-item props="test2"></el-form-item>
            <el-form-item props="test3"></el-form-item>
            <el-form-item props="test4"></el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                rules: {
                    test1: [],
                    test2: [],
                    test3: [],
                    test4: [],
                },
                testInfo: {
                    test1: '',
                    test2: '',
                    test3: '',
                    test4: '',
                }
            };
        }
    };
</script>

首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form。
其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有:

  1. el-form rules,model属性绑定,ref标识

  2. el-form-item prop属性绑定

解决方案4:

之前找到原因了,原因是 所有的prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行

上一篇(vue.js)mint-ui vue选项卡和分页下拉刷新怎么实现
下一篇(vue.js)如何解决阿里云上nodejs不支持import,项目npm run build后报Unexpected token import
明星图片
相关文章
《 (vue.js)element ui 表单验证 this$refs[formName]validate里面的内容死活不执行》由码蚁之家搜集整理于网络,
联系邮箱:mxgf168#qq.com(#改为@)