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

表单验证

基本结构、写法

方法步骤

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>
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189

常用表单验证规则

提交表单校验

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

 //提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
1
2
3
4
5
6
7
8
9
10
11

重置表单校验

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

必填校验

可以与其他校验同时设置

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

字符数校验+必填校验

设置多重验证标准

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

只能为中文校验

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

字符数校验

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

自定义校验规则

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

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

可根据具体验证规则修改

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

rules

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

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

只能输入数字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();
    };
1
2
3
4
5
6
7
8
9
10
11
12
13

rules

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

手机号校验

方法一

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

rules

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

方法二：

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

邮箱校验

方法一：

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

rules

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

方法二：

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

身份证号校验

方法一：

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

rules

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

方法二：

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

其余正则表达式校验

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

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])$/
1

营业执照校验

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

银行卡校验

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

微信号校验

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

6-12位字母和数字组合

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

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

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

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

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

整数

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

纯数字

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

价格

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

信号校验

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

6-12位字母和数字组合

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

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

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

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

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

整数

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

纯数字

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

价格

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