element表单校验

通过一个案例来示意：element的表单校验

html部分：

 

<template>
  <div id="app">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <!-- 设置prop属性 （校验谁写谁的字段 ） -->
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="数字" prop="num">
        <el-input type="text" v-model="ruleForm.num" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
  </el-form>
  </div>
</template>

js 部分：

export default {
  
    data(){
    var quYu = (rule, value, callback) => { // 数字校验
      if (value.length == 0) {
        return callback(new Error("数值不能为空，没有请填0"));
      }
      if (value < 0) {
        return callback(new Error("数值不能为负数"));
      }
      if (!(/^[-+]?\d+$/).test(value)) {
        return callback(new Error("请输入正整数或0"));
      }
      if (value.length > 9) {
        callback(new Error("数值长度不能超过9个字符"));
      } else {
        callback();
      }
    };
      return {
        ruleForm:{ // 先在data中定义el-form 中model绑定的值
          pass:'',
          num:'',
          age:''
        },
        rules: { // 进行表单校验
/*        
            required    如果为true，表示该字段为必填
            message    当不满足设置的规则时的提示信息
            pattern    正则表达式，通过正则验证值
            min    当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值
            max    当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值
            trigger    校验的触发方式，change（值改变） / blur （失去焦点）两种，
            validator    如果配置型的校验规则不满足你的需求，你可以通过自定义函数来完成校验
            validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))
 */
          pass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          num: [
            {validator:quYu, trigger: 'change' }
            // validator自定义校验的规则
          ],
          age: [
            { type: 'date', required: true, message: '年龄', trigger: 'blur' },
            { pattern: /^([0]|[1-9][0-9]*)$/, message: "请输入0或正整数", trigger: ['blur', 'change'] } 
            // pattern通过正则表达式验证值
          ],
        }
      }
    },
 
};

表单校验的相关属性：

required 如果为true，表示该字段为必填

message 当不满足设置的规则时的提示信息

pattern 正则表达式，通过正则验证值

min 当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值

max 当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值

trigger 校验的触发方式，change（值改变） / blur （失去焦点）两种，

validator 如果配置型的校验规则不满足你的需求，你可以通过自定义函数来完成校验

validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))
————————————————
版权声明：本文为CSDN博主「逆风优雅」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44603011/article/details/125739696