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

4 篇文章 0 订阅

表单验证

基本结构、写法

方法步骤

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})?$ /  
  • 5
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueElement-UI表单校验非常方便,只需要在表单项上添加相应的属性即可。下面是一个示例,展示如何为动态表单创建校验。 假设我们有一个动态表单表单内容由后端返回,包含表单项的类型、名称、默认值、是否必填等信息,我们需要根据这些信息生成表单,并对表单进行校验。 ```html <template> <el-form ref="dynamicForm" :model="formData" :rules="rules" label-width="120px"> <el-form-item v-for="item in formItems" :key="item.name" :label="item.label" :prop="item.name"> <el-input v-if="item.type === 'input'" v-model="formData[item.name]" :placeholder="item.placeholder"></el-input> <el-select v-else-if="item.type === 'select'" v-model="formData[item.name]" :placeholder="item.placeholder"> <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> <el-date-picker v-else-if="item.type === 'date'" v-model="formData[item.name]" :type="item.dateType" :placeholder="item.placeholder"></el-date-picker> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { formItems: [], // 后端返回的表单项信息 formData: {}, // 表单数据 rules: {}, // 表单校验规则 }; }, methods: { submitForm() { this.$refs.dynamicForm.validate(valid => { if (valid) { // 表单校验通过,可以提交数据 console.log(this.formData); } else { // 表单校验不通过,可以提示用户 console.log('校验不通过'); return false; } }); }, }, created() { // 模拟后端返回的表单项信息 setTimeout(() => { this.formItems = [ { type: 'input', name: 'username', label: '用户名', placeholder: '请输入用户名', required: true, }, { type: 'select', name: 'gender', label: '性别', placeholder: '请选择性别', required: true, options: [ { label: '男', value: 'male' }, { label: '女', value: 'female' }, ], }, { type: 'date', name: 'birthday', label: '出生日期', placeholder: '请选择出生日期', required: true, dateType: 'date', }, ]; // 根据表单项信息生成表单校验规则 this.formItems.forEach(item => { if (item.required) { this.$set(this.rules, item.name, { required: true, message: `${item.label}不能为空`, trigger: 'blur' }); } }); }, 1000); }, }; </script> ``` 上面的代码中,我们使用了 `v-for` 指令根据后端返回的表单项信息动态生成了表单。对于每个表单项,我们根据 `required` 属性生成了相应的校验规则,并将规则绑定到了表单上。在提交表单时,我们调用了表单的 `validate` 方法进行校验,根据校验结果决定是否提交数据。 需要注意的是,动态表单校验规则需要在表单项生成后才能生成,否则可能会因为表单项尚未生成而导致校验规则绑定失败。因此,我们在 `created` 钩子函数中进行了表单项和校验规则的生成。如果你的表单数据是通过异步请求获取的,可以在请求回调中生成表单校验规则

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值