vue element-ui 表单验证的使用及常用的表单校验规则

表单验证

基本结构、写法

方法步骤

1、在html中给el-form增加 :rules=“rules”

2、html中在el-form-item 中增加属性 prop=“名称”

3、js中直接在data中定义rules:{}

4、如果需要自定义 验证器 ，在data中定义，并在rules中对应需要验证的validator来指定验证器名称

基本结构

（以下表常用单校验规则可查看对应放置位置）

注意

• 渲染表单数据ruleForm、校验规则rules必填
• 若为自定义校验规则，data中自定义校验规则函数需要写，rules中对应需要验证的validator来指定验证器名称
• 名称要与表格渲染名称一一对应
• 可以设置多重验证标准

单选、多选、日期时间选择器…

<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
    style="width: 80%"
  >
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活动时间" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.date1"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker
            placeholder="选择时间"
            v-model="ruleForm.date2"
            style="width: 100%"
          ></el-time-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="即时配送" prop="delivery">
      <el-switch v-model="ruleForm.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活动性质" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
        <el-checkbox label="地推活动" name="type"></el-checkbox>
        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="特殊资源" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="线上品牌商赞助"></el-radio>
        <el-radio label="线下场地免费"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="活动形式" prop="desc">
      <el-input type="textarea" v-model="ruleForm.desc"></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 label="test" prop="test">
      <el-input v-model="ruleForm.test"></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>
</template>
    
    <script>
export default {
  data() {
        //自定义校验规则
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 18) {
            callback(new Error("必须年满18岁"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
     //自定义校验规则
    const checktest = (rule, value, callback) => {
      if (!Number(value)) {
        callback(new Error("只能输入数字 1-12"));
      } else {
        if (value < 1 || value > 12) {
          callback(new Error("只能输入数字 1-12"));
        } else {
          callback();
        }
      }
      return callback();
    };
    return {
        //渲染表单数据
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        age: "",
        test: "",
      },
      //校验规则
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur",},
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
            //自定义校验规则
        age: [{ validator: checkAge, trigger: "blur" }],
        test: [{ validator: checktest, trigger: "blur" }],
      },
    };
  },
  methods: {
      //提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
      //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
    
    <style>
</style>
    

常用表单验证规则

提交表单校验

提交传的是el-form中的ref的ruleForm
submitForm(‘ruleForm’)

 //提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

重置表单校验

  //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

必填校验

可以与其他校验同时设置

 name:[{ required: true, message: '请输入活动名称', trigger: 'blur' }]

字符数校验+必填校验

设置多重验证标准

name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {min: 3,max: 5,message: "长度在 3 到 5 个字符",trigger: "blur"},
    ]

只能为中文校验

 test1: [{ pattern: /^[\u4E00-\u9FA5]+$/, message: "用户名只能为中文" }],

字符数校验

test1: [{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]

自定义校验规则

封装相似功能的校验器(以限定输入字符长度为例)

如不重复利用，可将变量改为具体数值或句子

可根据具体验证规则修改

// 封装一下相似功能的校验器
    const validatorMethod = function (length) {
      return (rule, value, callback) => {
        if (value.length < length) {
          var message="test长度不能小于"+length
          callback(new Error(message));
        } else {
          callback();
        }
      };
    };

rules

test: [{ validator: validatorMethod(3), trigger: "blur" }],

以下皆可仿照’封装相似功能的校验器‘封装

只能输入数字x-x

具体数值可根据实际情况更改

    
const checktest = (rule, value, callback) => {
      if (!Number(value)) {
        callback(new Error("只能输入数字 1-12"));
      } else {
        if (value < 1 || value > 12) {
          callback(new Error("只能输入数字 1-12"));
        } else {
          callback();
        }
      }
      return callback();
    };

rules

test: [{ required: true,validator: checktest, trigger: "blur" }],

手机号校验

方法一

// 手机号校验器
    const phoneValidator = (rule, value, callback) => {
      if (/^1[3456789]\d{9}$/.test(value)) { // 利用正则表达式校验手机号
        callback()
      } else {
        callback(new Error('请输入正确手机号'))
      }
    }

rules

test1: [ // 手机号验证
          { required: true, trigger: 'change', message: '手机号不能为空' },
          { min: 11, max: 11, trigger: 'change', message: '请输入11位手机号码' },
          { validator: phoneValidator, trigger: 'blur' }
],

方法二：

test1: [ // 手机号验证
          { required: true, trigger: 'change', message: '手机号不能为空' },
          { min: 11, max: 11, trigger: 'change', message: '请输入11位手机号码' },
          { required: true, pattern:/^1[3456789]\d{9}$/,  message: "请输入正确手机号" },
],

邮箱校验

方法一：

const emailValidator = (rule, value, callback) => {
      if (/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/.test(value)) {
        // 利用正则表达式校验邮箱
        callback();
      } else {
        callback(new Error("请输入正确邮箱号"));
      }
};

rules

email: [
          { required: true, trigger: "change", message: "邮箱号不能为空" },
          { validator: emailValidator, trigger: "blur" },
        ],

方法二：

email: [
          { required: true, trigger: "change", message: "邮箱号不能为空" },
          { required: true, pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,  message: "请输入正确邮箱号" },
        ],

身份证号校验

方法一：

const IDcardValidator = (rule, value, callback) => {
      if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的身份证号"));
      }
    };

rules

IDcard: [
          { required: true, trigger: "change", message: "身份证号不能为空" },
          { validator: IDcardValidator, trigger: "blur" },
        ],

方法二：

IDcard: [
          { required: true, trigger: "change", message: "身份证号不能为空" },
          { required: true, pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,  message: "请输入正确身份证号" },
        ],

其余正则表达式校验

只需替换以上’手机号、邮箱、身份证号…'正则表达式，更改文字提示即可

ip校验

/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/

营业执照校验

/^[A-Z0-9]{8}-[A-Z0-9]$|^[A-Z0-9]{8}-[A-Z0-9]-[0-9]{2}$/

银行卡校验

/^([1-9]{1})(\d{14}|\d{18})$/

微信号校验

/^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/

6-12位字母和数字组合

/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,12}$/

包含英文字母、数字及下划线组成

/^[_a-zA-Z0-9]+$/

请输入8-20位英文字母、数字或者符号

/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){8,20}$/

整数

/^[1-9][0-9]*$/

纯数字

/^\d+$|^\d+[.]?\d+$/

价格

/^-?\d{1,4}(?:\.\d{1,2})?$ /  

信号校验

/^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/

6-12位字母和数字组合

/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,12}$/

包含英文字母、数字及下划线组成

/^[_a-zA-Z0-9]+$/

请输入8-20位英文字母、数字或者符号

/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){8,20}$/

整数

/^[1-9][0-9]*$/

纯数字

/^\d+$|^\d+[.]?\d+$/

价格

/^-?\d{1,4}(?:\.\d{1,2})?$ /