vue之起飞之旅

踩坑element rules的表单验证

2018-12-20  本文已影响0人  还好还好L

今天使用element的rules功能时遇到个无法验证问题,无法获取到input框的值,由于我是使用全局的表单验证加组件自身的方法去使用,所以一直以为是我代码问题,然而检查到一半去看官方例子时发现prop和form表单里面的v-model里面名字一样,,,,改名使用OK!!!!
上代码

-这一块是全局验证的代码

// 用户名 字母数字组成6-16位
export function userNameRE (rule, value, callback) {
  const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/g
  if (!value) {
    return callback(new Error('请填写用户名'))
  } else if (!reg.test(value)) {
    return callback(new Error('用户名格式错误'))
  } else {
    callback()
  }
}

// 密码 字母数字组成6-16位
export function passwordRE (rule, value, callback) {
  const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/g
  if (!value) {
    return callback(new Error('请填写密码'))
  } else if (!reg.test(value)) {
    return callback(new Error('用户名格式错误'))
  } else {
    callback()
  }
}
export default {
  // 常用登录  6-16字母数字组合
  logName: [{ required: true, validator: userNameRE, trigger: 'blur' }],
  // 常用密码  6-16字母数字组合
  logPwd: [{ required: true, validator: passwordRE, trigger: 'blur' }]
}


<template>
  <el-row class="login-style">
    <h1>Demo</h1>
        <el-form :model="ruleForm" ref="ruleForm" >
         <el-form-item label="用户名" prop="username" :rules="rules.logName">
            <el-input placeholder="用户名" v-model="ruleForm.username" ></el-input>
         </el-form-item>

         <el-form-item label="密码" prop="password" :rules="rules.logPwd">
            <el-input type="password" placeholder="密码" v-model="ruleForm.password" ></el-input>
         </el-form-item>

         <el-form-item  label="确认密码" v-if = "type === 'register'" prop="re_password" :rules="rules2.re_password">
            <el-input type="password" placeholder="确认密码"  v-model="ruleForm.re_password" ></el-input>
         </el-form-item>
         
        </el-form>

    <el-button type="primary" v-if = "type === 'register'"  @click="signup()">注册</el-button>
    <el-button type="primary" v-else @click="login('ruleForm')">登录</el-button>
    <router-link to="/login" v-show = "type === 'register'" tag="p">已有账号,去登录</router-link>
    <router-link to="/register" v-show = "type === 'login'" tag="p">没有账号,去注册</router-link>
  </el-row>
</template>

<script>
import rules from '@/utils/filter_rules'  //引入全局正则
export default {
  data () {
        var logPwd2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
    return {
            ruleForm:{
                username: '',
                password: '',
                re_password: '',
            },
            sayhub_token: '',
            rules,
            rules2:{
                re_password:[
                    { required: true,validator: logPwd2, trigger: 'blur' }
                ]
            }
    }
  },
}
</script>

那么晚安、

上一篇 下一篇

猜你喜欢

热点阅读