element-ui自定义表单校验规则及常用表单校验

妖狐艹你老母 2022-12-11 07:58 402阅读 0赞

### 前言 ###

表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。

### ElementUI校验规则 ###

ElementUI封装了组件el-form来收集、校验和提交数据，其中的rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则，我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的值进行校验，当不满足要求时会弹出message相应的提示信息。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]

### 自定义规则调用 ###

ElementUI提供的表单验证规则是有限的，可能无法满足我们项目的需求这时候就需要我们来自定义验证规则。我们在在data() \{\}中添加自定义的校验规则，然后在在data的return中通过validator引用校验规则。data() \{return\{\}\}中定义的rules要 中的 :rules 属性值相同，rules中的对象userName要与与 中的prop属性值相同。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]

### 自定义校验规则 ###

validate是ElementUI封装用于对整个表单进行验证的，参数是一个回调函数。该回调函数在校验结束后被调用，是否校验成功和未通过校验的字段。这个回调函数的原型为：function fun(rule, value, callback, source, options)\{\}，其中rule指向当前的规则对象，value是需要进行校验的值，callback是验证之后的执行回调，source是跟value的值一致的键值对象（可以忽略），options是个额外的配置选项（可选）。所以常见的函数定义如下，校验手机号码是否正确。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]

### validate校验 ###

自定义校验方法是一个在校验结束后才会被调用回调函数，所以在提交表单的时候我们需要通过$refs来调用validate来继续自定义校验。自定义校验规则时必须保证每个分支都调用了callback方法，否则会导致el-form组件在使用validate方法时无法进入回调函数。调用validate()校验时需要prop属性绑定校验的字段名，否则无法校验v-model中绑定的值。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]

### 常用校验规则 ###

为了方便我们还是定义一个validation.js文件来专门定义常用的校验方法，然后导入validation.js进而使用。这里注意自定义rules时外层的message高于callback中的错误提示，所以自定义规则时建议外层勿定义message，可以用两个规则来校验内容。定义好之后在需要用到的地方直接 import 引入，然后在 rules 校验中加入即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]  
附上本文用到的源码

<template>
      <el-form
        :model="loginForm"
        autocomplete="on"
        class="login-form"
        :rules="rules"
      >
        <el-form-item prop="username" label="用户名">
          <el-input
            placeholder="请输入用户名"
            name="username"
            type="text"
            v-model="loginForm.username"
            autocomplete="on"
          />
        </el-form-item>
      </el-form>
    </template>
    <script>
    
    //JavaScript->
    rules: {   username: [    {  required: true, message: '请输入用户名', trigger: 'blur' },
        {  min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      ]
    }
    //JavaScript
    data(){   
        const chackLen = (rule, value, callback) => {   
             let len = value.length  
              if ( len < 3 || len > 5) { 
        callback(new Error('用户名长度在3-5之间'))  
         } else {    
              callback()  
              } 
            }
       return{  
            rules: {  
                  username: [   
                       {  required: true, message: '请输入用户名', trigger: 'blur' },
                       {  validator: chackLen, trigger: 'blur' }  // 自定义长度校验
                       ]
      } }
      
    methods: {   
      onSubmit() {        
         this.$refs['rulesForm'].validate(valid => { 
            if (valid) {   
               //如果校验为真说明符合要求可以继续 
                
            }else{          
              //反正说明校验失败，返回对应的message 
                
                }    
                 });  
          } 
          }
                
    let matching = (value, callback, reg, message) => {   
        if (value === '' || value === undefined || value == null){    
             callback(new Error(message))  
             } else {    
                  if (!reg.test(value)) {     
                        callback(new Error(message))  
                     } else {    
                      callback()  
                        } 
     }
     }

module.exports = { 
        Username(rule, value, callback) { 
            let reg = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,12}$/
            matching(value, callback, reg, '请输入6-12位字母和数字组合')
        }, SimplePwd(rule, value, callback) { 
            let reg = /^[_a-zA-Z0-9]+$/
            matching(value, callback, reg, '包含英文字母、数字及下划线组成')
        }, ComplexPwd(rule, value, callback) { 
            let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){8,20}$/
            matching(value, callback, reg, '请输入8-20位英文字母、数字或者符号')
        }, Phone(rule, value, callback) { 
            let reg = /^[1][3, 4, 5, 6, 7, 8][0-9]{9}$/
            matching(value, callback, reg, '请输入正确的手机')
        }, Email(rule, value, callback) { 
            let reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
            matching(value, callback, reg, '输入正确的邮箱')
        }, IdCard(rule, value, callback) {  let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ 
           matching(value, callback, reg, '输入正确的身份证号码') }, Company(rule, value, callback) { 
            let reg = /^[A-Z0-9]{8}-[A-Z0-9]$|^[A-Z0-9]{8}-[A-Z0-9]-[0-9]{2}$/
            matching(value, callback, reg, '请输入正确的营业执照')
        }, Weixin(rule, value, callback) { 
            let reg = /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/
            matching(value, callback, reg, '请输入正确的微信号')
        }, Integer(rule, value, callback) { 
            let reg = /^[1-9][0-9]*$/
            matching(value, callback, reg, '请输入正确的整数')
        }, Number(rule, value, callback) {  let reg = /^\d+$|^\d+[.]?\d+$/  
              matching(value, callback, reg, '请输入纯数字') }, 
              Landline(rule, value, callback) {  
            let reg = /^(\d{3,4}-)?\d{7,8}$/   
             matching(value, callback, reg, '请输入正确的座机') 
         },
              Ip(rule, value, callback) { 
                   let reg = /^(\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])$/  
              matching(value, callback, reg, '请输入正确的IP')
         },
             Price(rule, value, callback) {  let reg = /^-?\d{1,4}(?:\.\d{1,2})?$ /  
             matching(value, callback, reg, '请输入正确的价格') 
        }, 
             BankCard(rule, value, callback) {  
            let reg = /^([1-9]{1})(\d{14}|\d{18})$/   
             matching(value, callback, reg, '请输入正确的银行卡') }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6fb16a9cc13a4b799b33133469434418.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/e650263aac184cbdb7e96a9e95543273.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/5beac8e5d3864640b32370c1afed4fa0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/e249b8dd355346c593d431f8cb16daf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/98316f3ce46f4e568ecb2c1de74037a8.png