vue笔记（五）表单验证

这里以验证两次密码是否一致，来记录vue表单验证写法。

 

一、首先这里使用 Element UI 的表单验证，基本用法如地址：http://element-cn.eleme.io/#/zh-CN/component/form

 

二、然后查看示例代码，了解对应的属性，方法，事件。

 

三、拷贝示例代码然后简化，如下：

    <div>
      <el-form :model="ruleForm" :rules="demoRules" ref="ruleForm" size="mini">
        <el-form-item label="验证用户名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="再次输入" prop="nameAgain">
          <el-input v-model="ruleForm.nameAgain"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitBtn">提交</el-button>
          <el-button @click="resetBtn">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

这里定义了一个form表单，指定了表单数据ruleForm，验证规则demoRules，两个input，根据 Element UI 的要求加上prop（和需要校验的值同名）。

 

四、定义校验规则，如下：

    data () {
      //自定义规则，参数value是校验的值，callback是回调方法，用于显示校验不通过
      let validatePass=(rule,value,callback)=>{
        if(value === null || value === undefined){
          callback(new Error('用户名不能为空'))
        }else{
          //判断第二次输入是否是空，非空则校验第二次输入的内容
          if(this.ruleForm.nameAgain!=='' && this.ruleForm.nameAgain!==undefined){
            this.$refs.ruleForm.validateField('nameAgain')
          }
          callback()
        }
      }
      //判断第二次输入内容和首次输入内容是否一致
      let validatePass2=(rule,value,callback)=>{
        if(value === null || value === undefined){
          callback(new Error('请再次输入'))
        }else if(value !== this.ruleForm.name){
          callback(new Error('两次输入不相同'))
        }else{
          callback()
        }
      }
      return {
        ruleForm:{
        },
        //定义校验规则，一组规则以一个{ }标识，可以通过validator来引用自定义规则
        demoRules:{
          name:[
            {required:true,message:'不能为空',trigger:'blur'},
            {validator:validatePass,trigger:'blur'}
            ],
          nameAgain:[
            {required:true,message:'不能为空',trigger:'blur'},
            {validator:validatePass2,trigger:'blur'}
            ]
        }
      }

    },

校验规则可以多项，以{ }的形式放入数组，这里需要注意的是自定义的校验规则要在demoRules之前定义，否则调用不到。

 

 

 

五，提交时候判断是否校验成功，如下：

      submitBtn:function () {
        this.$refs.ruleForm.validate((valid)=>{
          if(valid){
            console.log('校验通过咯')
          }else{
            console.log('没通过呢')
          }
        })
      },
      resetBtn:function () {
        this.$refs.ruleForm.resetFields();
      }

 

最后简单说一下 ref 和 $refs

 

 

前者可以理解为，通过添加ref ，给节点取了别名，可以通过this.$refs.别名 来调用对应节点。

注：在element ui使用键盘事件时，如keyup，需要额外使用native：@keyup.enter.native="method-name"

效果如下：