element plus 使用js语法 element ui form validate

  我们在开发中，有势会接到一种关于表单验证的需求，在对整体表单验证的同时也希望对单个表单进行验证，虽然官网都有api，但是为了让大家更为直观，这里小杰为了更为直观的理解做了总结。

本次涉及到的核心点

validate（callback）参数为回调函数

validateField（arr,callback）第一个参数为数组，第二个参数为回调函数

--额外两个--

resetFields（）表单重置，表单所有字段值重置为初始值，移除校验结果

clearValidate（arr/string）移除表单项的校验结果。他的参数是字符串或者数组，想移除那个就把prop值作为参数，多个就以数组形式

---------------------------------接下来我们进入正题----------------------------------

from表单

------表单随便写的不要在意格式，此次的目的是为了理解表单校验-----

<el-form
  status-icon
  :model='ruleFrom'
  :rules="rules"
   ref="ruleForm"
   style="width: 345px"
   class="demo-ruleForm">
  <el-form-item prop="user"  label="账户 :"> 
        <el-input
          placeholder="请输入账户"
          size="small"
          style="width: 200px"
          v-model="ruleFrom.user"
        ></el-input>  
        <el-button size="small" type="primary" @click="dd">校验</el-button>            
      </el-form-item>            
      <el-form-item prop="pass" label="密码 :">               
        <el-input
          placeholder="输入数字"
          size="small"
          style="width: 250px"
          v-model="ruleFrom.pass"
        ></el-input>                 
      </el-form-item>               
      <el-form-item>
        <el-button class="btn">取消</el-button>    
        <el-button class="btn" @click="submitForm">提交</el-button>            
          </el-form-item>  
</from>

一. 首先是创建校验规则

1. 表单验证

//trigger: "blur" 输入框失焦时触发校验
//required: true 输入框为空校验提示
rules: {
        user: [{ required: true, message: '请输入账户', trigger: "blur" }],
        pass: [{required: true, message: '请输入密码' ,trigger: "blur" },],
      },

2. 自定义校验规则

var validateuser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("账户为空"));
      } else if (!/^\d{4}$/.test(value)){
          callback(new Error("请输入正确的账户"));
      }
        callback();  
    };
var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码为空"));
      } else  if (!/\d/.test(value)) {
          callback(new Error("请输入正确密码"));
      }
        callback();
    };
 return {
    ruleFrom:{
        user: "",
        pass: "",
      },
 rules: {
    user: [{ validator: validateuser,trigger: "blur" }],
    pass: [{ validator: validatePass,trigger: "blur" },],
 },

注：这些操作都是在data()下进行的 

二、校验

1. 点击提交时，整体表单校验，validate方法 

//value 返回的是布尔值 true和false  
submitForm() {
  this.$refs.ruleForm.validate((value) => {
    console.log(value)
    });
  },

--------------校验效果如图所示-------------

①、表单为空时

②、表单不符合规则

③、表单部分不符合规则

 ④、表单校验成功

2. 点击校验时，对部分表单校验，validateField方法，这里拿账户来举例

//validateField第一个参数是数组，里面就是我们要部分校验的表单
//validateField第二个参数是数组，valid返回的是表单验证错误时返回的提示语，vv返回的是个对象
dd() {
      this.$refs.ruleForm.validateField(["user"], (valid,vv) => {
        if(!valid){
          console.log("校验成功")
        }
      });
    },

----------校验效果如图所示------------

①、账户为空时 

 ②、账户不符合规则 

 ③、账户验证成功  valid返回的是空串，vv返回的是null

         最后，如果想在添加提交的时候也校验一下部分表单是否通过，可以加个开关然后在validate中多加一个开关判断就ok了，希望可以帮助到大家