• element ui form 表单验证

    表单验证方法

    在el-form元素上总体设置校验规则rules，下面是官方案例
    1. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    2.   <el-form-item label="活动名称" prop="name">
    3.     <el-input v-model="ruleForm.name">el-input>
    4.   el-form-item>
    5.   <el-form-item label="活动区域" prop="region">
    6.     <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
    7.       <el-option label="区域一" value="shanghai">el-option>
    8.       <el-option label="区域二" value="beijing">el-option>
    9.     el-select>
    10.   el-form-item>
    11.   <el-form-item label="活动时间" required>
    12.     <el-col :span="11">
    13.       <el-form-item prop="date1">
    14.         <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;">el-date-picker>
    15.       el-form-item>
    16.     el-col>
    17.     <el-col class="line" :span="2">-el-col>
    18.     <el-col :span="11">
    19.       <el-form-item prop="date2">
    20.         <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;">el-time-picker>
    21.       el-form-item>
    22.     el-col>
    23.   el-form-item>
    24.   <el-form-item label="即时配送" prop="delivery">
    25.     <el-switch v-model="ruleForm.delivery">el-switch>
    26.   el-form-item>
    27.   <el-form-item label="活动性质" prop="type">
    28.     <el-checkbox-group v-model="ruleForm.type">
    29.       <el-checkbox label="美食/餐厅线上活动" name="type">el-checkbox>
    30.       <el-checkbox label="地推活动" name="type">el-checkbox>
    31.       <el-checkbox label="线下主题活动" name="type">el-checkbox>
    32.       <el-checkbox label="单纯品牌曝光" name="type">el-checkbox>
    33.     el-checkbox-group>
    34.   el-form-item>
    35.   <el-form-item label="特殊资源" prop="resource">
    36.     <el-radio-group v-model="ruleForm.resource">
    37.       <el-radio label="线上品牌商赞助">el-radio>
    38.       <el-radio label="线下场地免费">el-radio>
    39.     el-radio-group>
    40.   el-form-item>
    41.   <el-form-item label="活动形式" prop="desc">
    42.     <el-input type="textarea" v-model="ruleForm.desc">el-input>
    43.   el-form-item>
    44.   <el-form-item>
    45.     <el-button type="primary" @click="submitForm('ruleForm')">立即创建el-button>
    46.     <el-button @click="resetForm('ruleForm')">重置el-button>
    47.   el-form-item>
    48. el-form>
    49. <script>
    50.   export default {
    51.     data() {
    52.       return {
    53.         ruleForm: {
    54.           name: '',
    55.           region: '',
    56.           date1: '',
    57.           date2: '',
    58.           delivery: false,
    59.           type: [],
    60.           resource: '',
    61.           desc: ''
    62.         },
    63.         rules: {
    64.           name: [
    65.             { required: true, message: '请输入活动名称', trigger: 'blur' },
    66.             { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    67.           ],
    68.           region: [
    69.             { required: true, message: '请选择活动区域', trigger: 'change' }
    70.           ],
    71.           date1: [
    72.             { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
    73.           ],
    74.           date2: [
    75.             { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
    76.           ],
    77.           type: [
    78.             { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
    79.           ],
    80.           resource: [
    81.             { required: true, message: '请选择活动资源', trigger: 'change' }
    82.           ],
    83.           desc: [
    84.             { required: true, message: '请填写活动形式', trigger: 'blur' }
    85.           ]
    86.         }
    87.       };
    88.     },
    89.     methods: {
    90.       submitForm(formName) {
    91.         this.$refs[formName].validate((valid) => {
    92.           if (valid) {
    93.             alert('submit!');
    94.           } else {
    95.             console.log('error submit!!');
    96.             return false;
    97.           }
    98.         });
    99.       },
    100.       resetForm(formName) {
    101.         this.$refs[formName].resetFields();
    102.       }
    103.     }
    104.   }
    105. script>
    注意

    自定义校验规则

    如果想配置更复杂的校验规则，可以参考如下官方案例

    1. <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    2.   <el-form-item label="密码" prop="pass">
    3.     <el-input type="password" v-model="ruleForm.pass" autocomplete="off">el-input>
    4.   el-form-item>
    5.   <el-form-item label="确认密码" prop="checkPass">
    6.     <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off">el-input>
    7.   el-form-item>
    8.   <el-form-item label="年龄" prop="age">
    9.     <el-input v-model.number="ruleForm.age">el-input>
    10.   el-form-item>
    11.   <el-form-item>
    12.     <el-button type="primary" @click="submitForm('ruleForm')">提交el-button>
    13.     <el-button @click="resetForm('ruleForm')">重置el-button>
    14.   el-form-item>
    15. el-form>
    16. <script>
    17.   export default {
    18.     data() {
    19.       var checkAge = (rule, value, callback) => {
    20.         if (!value) {
    21.           return callback(new Error('年龄不能为空'));
    22.         }
    23.         setTimeout(() => {
    24.           if (!Number.isInteger(value)) {
    25.             callback(new Error('请输入数字值'));
    26.           } else {
    27.             if (value < 18) {
    28.               callback(new Error('必须年满18岁'));
    29.             } else {
    30.               callback();
    31.             }
    32.           }
    33.         }, 1000);
    34.       };
    35.       var validatePass = (rule, value, callback) => {
    36.         if (value === '') {
    37.           callback(new Error('请输入密码'));
    38.         } else {
    39.           if (this.ruleForm.checkPass !== '') {
    40.             this.$refs.ruleForm.validateField('checkPass');
    41.           }
    42.           callback();
    43.         }
    44.       };
    45.       var validatePass2 = (rule, value, callback) => {
    46.         if (value === '') {
    47.           callback(new Error('请再次输入密码'));
    48.         } else if (value !== this.ruleForm.pass) {
    49.           callback(new Error('两次输入密码不一致!'));
    50.         } else {
    51.           callback();
    52.         }
    53.       };
    54.       return {
    55.         ruleForm: {
    56.           pass: '',
    57.           checkPass: '',
    58.           age: ''
    59.         },
    60.         rules: {
    61.           pass: [
    62.             { validator: validatePass, trigger: 'blur' }
    63.           ],
    64.           checkPass: [
    65.             { validator: validatePass2, trigger: 'blur' }
    66.           ],
    67.           age: [
    68.             { validator: checkAge, trigger: 'blur' }
    69.           ]
    70.         }
    71.       };
    72.     },
    73.     methods: {
    74.       submitForm(formName) {
    75.         this.$refs[formName].validate((valid) => {
    76.           if (valid) {
    77.             alert('submit!');
    78.           } else {
    79.             console.log('error submit!!');
    80.             return false;
    81.           }
    82.         });
    83.       },
    84.       resetForm(formName) {
    85.         this.$refs[formName].resetFields();
    86.       }
    87.     }
    88.   }
    89. script>
    注意

    自定义校验规则也可以和普通规则混用

    1. <el-form-item label="用户名" prop="username"
    2.                         :rules="[
    3.                           {required: true, message: '不能为空', trigger: 'blur'},
    4.                           { validator: valid, trigger: 'blur' }
    5.                         ]">
    6.        <el-input v-model="form.username" >el-input>
    7.  el-form-item>
    8. <script>
    9. import { valid } from '@/utils/validateFun.js'
    10. export default {
    11.     methods: {
    12.         valid
    13.     }
    14. }
    15. script>
    1. // validateFun.js
    2. export function valid(rule, value, callback) {
    3.   if (!/\d+/.test(value)) {
    4.     callback(new Error('请输入数字值'));
    5.   }else {
    6.     callback();
    7.   }
    8. }

    在el-form-item元素上配置校验规则

    比较喜欢这种方式

    1. <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
    2.   <el-form-item
    3.     prop="email"
    4.     label="邮箱"
    5.     :rules="[
    6.       { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    7.       { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    8.     ]"
    9.   >
    10.     <el-input v-model="dynamicValidateForm.email">el-input>
    11.   el-form-item>
    12. el-form>
    注意

    1、此方法相当于把el-form上的rules属性挪移到了el-form-item上，el-form上的大部分属性都可以在el-form-item上使用

    2、如果绑定的form表单为嵌套对象，prop和v-model值仍要保持一致

    1. <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
    2.   <el-form-item
    3.     prop="userinfo.email"
    4.     label="邮箱"
    5.     :rules="[
    6.       { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    7.       { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    8.     ]"
    9.   >
    10.     <el-input v-model="dynamicValidateForm.userinfo.email">el-input>
    11.   el-form-item>
    12. el-form>

    3、 rules可以配置多种校验规则，所以它的值可以是数组。校验规则，从第一个开始依次执行，前面的校验通过了，才会执行下一个校验。如果想校验正则表达式，案例如下

    1. <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
    2.   <el-form-item
    3.     prop="userinfo.email"
    4.     label="邮箱"
    5.     :rules="[
    6.       { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    7.       { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
    8.       { pattern: /^\d+\/\d+$/, message: '格式不正确', trigger: 'blur' }
    9.     ]"
    10.   >
    11.     <el-input v-model="dynamicValidateForm.userinfo.email">el-input>
    12.   el-form-item>
    13. el-form>

    4、当元素为select时，trigger可以配置为['blur', 'change']，否则select选值时，校验提示错误信息不消失

  • 相关阅读:
    @PropertySource配置的用法
    16.Composition API(二) （watchEffect和watch的使用）
    J. Counting Trees (树，卡特兰数)
    【计算机毕业设计】基于HTML+CSS+JavaScript学生宿舍管理系统
    【错误记录】Navigation 导航组件报错 ( Activity xxActivity@3f does not have a NavController set on 2131xx )
    数据结构——栈和队列（栈的顺序存储结构和链式存储结构）
    [卷积神经网络]FasterNet论文解析
    vscode 注释插件koroFileHeader
    Flink系列文档-(YY03)-Flink编程基础API
    服务器巡查脚本
  • 原文地址：https://blog.csdn.net/zbailing/article/details/140005993