VUE新增内容，数据库插入数据的校验

一、说明

对于直接在数据库插入数据，会存在：用户输入的数据可能存在错误或者特殊符号等异常问题。这就需要对数据验证，从而避免对后续的工作造成影响。

前端插入数据交互机制一般为：点击新增按钮，弹出输入框，输入相应内容，点击保存插入到数据库中。

二、el-form :rules 简介

Form 组件提供了表单验证的功能，只需要通过 rules 属性将数据传入约定的验证规则，并将 Form-Item的 prop 属性设置为需校验的字段名即可。

可以对整个表单进行验证，也可以对单个内容进行校验。

结合表单验证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 正则表达式对输入的内容进行校验，用途广泛，因此本文介绍一些常见的校验正则表达式，方便大家使用。

参考链接：

//验证身份证号
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 ，并且介绍了常见的正则表达式对输入内容进行校验。