Vue前端：新增记录时，实现输入内容校验机制
前言
很多系统都有一个功能，就是用户可以在前端新增记录，插入到数据库中。
交互机制一般为：点击新增按钮，弹出输入框，输入相应内容，点击保存插入到数据库中。
这种操作方式可能存在一个问题：用户输入数据时可能会输错了，比如身份证、电话号码等信息少了一位或者多了一位，或者含有一些不该出现的特殊字符。
数据出现错误很可能会影响后续工作，但是插入数据的时候用户往往很难自己发现。因此，需要在用户输入内容后进行校验，将结果反馈到前端供用户参考，这样可以很大程度上解决内容输入错误的问题。
本文介绍了一种在 Vue 中，对用户输入内容进行校验并反馈到前端显示的方法。
一、el-form :rules 简介
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item的 prop 属性设置为需校验的字段名即可。
可以对整个表单进行验证，也可以对表单的单个内容进行校验。
具体分析链接（很详细，非常值得一看）：vue elementui el-form 表单验证 rules详细说明
这篇文章说的比较简介：结合表单验证谈el-form中model、prop、rules属性
二、具体说明
1.代码示例及说明
代码示例：
<el-form :model="newInsert_data"
:rules="newInsert_rules"
ref="ruleForm" //涉及Dom 元素的获取(el-form表单对象)
label-width="230px"
id="newinsert_form">
/el-form>
data()
return{
ssfjk_rules: {
//以下列举了几个常见的校验方式
dsrxm: [ //保证不为空
{
required: true, message: '请输入内容！', trigger: 'blur' },
],
sfzjh: [ //保证输入的身份证号合理
{
required: true, message: '请输入内容！',trigger: 'blur' },
{
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,message: "请输入正确的身份证号！",trigger: "blur"}
],
lxfs: [ //保证输入的联系电话合理
{
pattern:/(0\d{2,3}\d{7,8})|([1][3-9][0-9]{9})$/,message: "请输入正确的联系方式！",trigger: "blur"}
]
},
};
},
解释说明：
1.trigger : 定义何时开始校验
//trigger类型为blur的功能是文本框失去焦点才会触发
trigger: 'blur'
//trigger类型为change的功能是文本框在输入内容时触发
trigger: 'change'
//trigger类型也可以同时使用blur和change，功能结合上面两个的功能
trigger: ['blur', 'change']
2.required：定义是否为必填项
//必填
required: true
//不是必填
required: false //或者不设置 默认不必填
3.message：未通过校验的提示信息
name:{
type: "string", required: true, message: "Name is required"
}
4.len：长度设置
roles: {
type: "array", required: true, len: 3
}
5.min/max：判断数据大小范围，通常对数字大小范围做校验。对于字符串和数组类型，将根据长度进行比较
activityName:{
required: true, message: '请输入活动名称', trigger: 'blur' },
{
min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
6.enum：枚举值验证，验证输入的值是否为这几个值中的一个
role: {
type: "enum", enum: ['admin', 'user', 'guest']}
7.pattern：正则表达式，如果需要验证手机号码之类，可以直接编写正则表达式配置到校验规则中，那么就不需要自己去校验了，由校验器自动校验
sfzjh: [ //保证输入的身份证号合理
{
required: true, message: '请输入内容！',trigger: 'blur' },
{
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,message: "请输入正确的身份证号！",trigger: "blur"}
],
三、pattern：正则表达式拓展介绍
用 pattern 正则表达式对输入的内容进行校验，用途广泛，因此本文介绍一些常见的校验正则表达式，方便大家使用。
说明：不同的作者给出的正则表达式不同，仅供参考
参考链接：
正则表达式验证（姓名、性别、生日、手机号、身份证、邮箱、强密码）
JAVA 最常用实用的正则表达式校验
//验证身份证号
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
//验证电话号码
pattern:/(0\d{2,3}\d{7,8})|([1][3-9][0-9]{9})$/
//验证邮箱
//这个正则表达式可以匹配符合以下规则的邮箱地址：
//以小写字母、大写字母、数字或特殊字符开头（.!#$%&'*+/=?^_`{|}~-）
//后面跟着一个 @ 符号
//后面是一个小写字母、大写字母、数字的字符串，长度为 1 到 61 位
//可能会有多个 . 和字符串的组合，每个字符串的长度也为 1 到 61 位
pattern:/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
//验证年龄1-150
pattern:/^(?:[1-9][0-9]?|1[01][0-9]|150)$/
//验证性别 男/女
pattern: /^[男|女]{1}$/
//验证强密码：必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8到10之间
pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W])[\da-zA-Z\W]{8,10}$/
总结
本文介绍了一种在 Vue 中，对用户输入内容进行校验并反馈到前端显示的方法，主要是利用 el-form :rules ，并且介绍了常见的正则表达式对输入内容进行校验。
希望对大家有用！