详解 vue如何使用 rules 对表单字段进行校验

一、失去焦点的几种验证的引入方式：

　　1、写在 data 中验证：

　　表单内容为：

<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="用户名称:" prop="userName">
       <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>

　　标签解释：

• <el-form>：表示这是一个表单；
• <el-form> -> ref：表单被引用时的名称，标识；
• <el-form> -> rules：表单验证规则；
• <el-form> -> model：表单数据对象；
• <el-form> -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值；
• <el-form> -> <el-form-item>：表单中的每一项子元素；
• <el-form-item> -> label：标签文本；
• <el-form-item> -> prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性时必填的；
• <el-input>：输入框；
• <el-input> -> v-model：绑定的表单数据对象属性；
• <el-input> -> style：行内样式；
• <el-input> -> maxlength：最大字符长度限制；

　　data 数据：

// 表单验证
      formRules: {
        username:[
          {require: true, message: "请输入用户名称", trigger: "blur"}
        ]
      },

　　代码解释：

• formRules：与上文的  ‘表单内容’ 中 <el-form> 表单的 :rules属性值相同；
• userName：与上文的  ‘表单内容’ 中 <el-form-item> 表单子元素的 prop 属性值相同；
• 验证内容是：'require: true' 的意思是 必填；"trigger: 'blur' " 的意思是失去焦点时触发该规则；"message: '请输入用户名称'" 的意思是在规则触发时，显示的内容；

　　运行结果为：

　　2、写在行内：

　　表单内容：

<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="银行名称:" prop="accountName" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]">
        <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>

•  <el-form-item> -> rules：此处与第一种的效果一致；

　　运行结果为：

　　3、引入外部定义的规则：

　　表单内容：

<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="银行卡号:" prop="accountNumber">
       <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="19"/>
    </el-form-item>
</el-form>

　　其中 script 内容为：

import { validateAccountNumber } from "../utils/validate";

// 判断银行卡账户是否正确
const validatorAccountNumber = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入账户信息"));
  } else {
    if (validateAccountNumber(value)) {
      callback();
    } else {
      return callback(new Error("账号格式不正确"));
    }
  }
};


export default {
    data() {
        return {
            // 省略别的数据定义
            ...
        
            // 表单验证
            formRules: {
                accountNumber: [
                    {required: true,validator: validatorAccountNumber,trigger: "blur"}
                ]
            }
        }
    }
｝

　　部分代码解释：

• import：先引入了外部的验证规则；
• const：顶一个规则常量，常量名可变， ‘=(rule,value,callback) => {}' 为固定格式，value 入参为验证的字段值；
• formRules3 -> accountNumber：表单验证中使用 validator 指定自定义校验规则常量名称;

　　其中 validate.js为：

/* 银行账户 */
export function validateAccountNumber(str) {
  const reg = /^([1-9]{1})(\d{14}|\d{18})$/
  return reg.test(str)
}

　　运行结果为：

 二、在表单提交时进行验证的方式：

　　1、表单的提交按钮：

    <el-form ref="rulesForm4" :rules="formRules" :model="rulesForm4" label-width="200px">
      <el-form-item>
        <el-button type="primary" @click="onSubmit('rulesForm4')">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>

• <el-button>：按钮；
• <el-button> -> type：按钮类型；
• <el-button> -> @click：按钮点击时触发的事件，这里注意方法的入参为 'rulesForm'，这里要与 <el-form> 表单的 rel 属性值一致；

　　2、methods 方法：

methods: {
    // 保存
    onSubmit(formName) {
        this.$refs[formName].validate(valid => {
            if (valid) {
                console.log("success submit!!");
            }else{
                console.log("error submit!!");
            }
        });
    },
    // 取消
    cancel() {
        
    }
}

• this.$refs[formName].validate：formName 就是传入的 'ruleForm'，与 <el-form> 表单的 rel 属性值一致，这样就指定好需要验证的表单了；

　　运行结果为：

 

 三、完整的实例代码：

　　1、rule.vue：

<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="表单" name="rulesPane" @tab-click="handleClick">
        <!-- 表单 -->
        <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
          <el-form-item label="用户名称:" prop="userName">
            <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
          </el-form-item>
          <el-form-item label="银行名称:" prop="accountName" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]">
            <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
          </el-form-item>
          <el-form-item label="银行卡号:" prop="accountNumber">
            <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="50"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
 
<script>
import { validateAccountNumber } from "@/utils/validate";
 
// 判断银行卡账户是否正确
const validatorAccountNumber = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入账户信息"));
  } else {
    if (validateAccountNumber(value)) {
      callback();
    } else {
      return callback(new Error('账号格式不正确'))
    }
  }
};
 
export default {
  name: "rules",
  data() {
    return {
      activeName: "rulesPane",
      defaultProps: {
        children: "children",
        label: "label"
      },
      rulesForm: {
      },
      //   表单验证
      formRules: {
        userName: [
          {
            required: true,
            message: "请输入用户名称",
            trigger: "blur"
          }
        ],
        accountNumber: [
          {
            required: true,
            validator: validatorAccountNumber,
            trigger: "blur"
          }
        ],
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleClick(tab) {
      
    },
    // 取消
    cancel() {
      
    },
    // 保存
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log("success submit!!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
 
<style lang="scss">
</style>

　　运行界面为：