• 正则校验的多种方式

    1.IP地址:端口

    let ipReg=/^(\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])\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/

    2.IP地址

    let ipReg =  /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3}$/

    3.网址,以http或https协议开头

    let httpReg = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/

    4.统一社会信用代码格式

    let httpReg = /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g

    5.邮箱

    let emailReg=/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/

    6.手机号

    let phoneReg= /^[1][3,4,5,6,7,8,9][0-9]{9}$/

    7.统一社会信用代码

    unifiedSocialCreditCode: [

                        {

                            required: true,

                            message: "请输入统一社会信用代码",

                            trigger: "blur",

                        },

                        {

                            pattern: /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g,

                            message: "请输入正确的统一社会信用代码",

                            trigger: "blur",

                        },

                    ],

    8.邮政编码

    //部分地区支持以0开头的

    postalCode: [

                        {

                            required: true,

                            message: "请输入邮政编码",

                            trigger: "blur",

                        },

                        {

                            pattern: /^[0-9]{6}$/,

                            message: "请输入正确的邮政编码",

                            trigger: "blur",

                        },

                    ],

    9.办公电话

    officePhone: [

                        {

                            pattern: /^((0\d{2,3})-)?(\d{7,8})$/,

                            message: "请输入正确的办公电话",

                            trigger: "blur",

                        },

                    ],

    涉及多选的

      {

                type: 'array',

                required: true,

                message: '请至少选择一个数据要素服务商',

                trigger: 'change',

              },

    校验的几种写法

    1.直接在绑定的form表单中rules中定义

    1. rules:{
    2.   contact: [
    3.           { required: true, message: '请输入联系人', trigger: 'blur' },
    4.           { max: 64, message: '长度在 64 个字符内', trigger: 'blur' },
    5.         ],
    6. }

    2.利用pattern实现正则的验证

    1. email: [
    2.           { required: true, message: '请输入邮箱', trigger: 'blur' },
    3.           {
    4.             required: true,
    5.             pattern:
    6.               /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    7.             message: '请输入正确的邮箱格式',
    8.             trigger: 'blur',
    9.           },
    10.         ],

    3.涉及数字范围的验证

    1. 涉及的input中的数据类型要进行转换
    2. input输入的内容都是字符串的形式
    3. v-model.number=""  //转换为数字
    4.  
    5.  port: [
    6.           {
    7.             required: blur,
    8.             type: 'number',
    9.             min: 1,
    10.             max: 65535,
    11.             message: '请输入范围之内的端口',
    12.           },
    13.         ],

    4.利用validator方法实现校验

    1.   const validateCode = (rule, value, callback) => {
    2.       let httpReg = /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g
    3.       if (value !== '') {
    4.         if (!httpReg.test(value)) {
    5.           callback(new Error('统一社会信用代码格式不正确'))
    6.         } else {
    7.           callback()
    8.         }
    9.       } else {
    10.         callback(new Error('请输入统一社会信用代码'))
    11.       }
    12.     }
    13.  
    14.  
    15.    rules:{
    16.       uscc: [
    17.           { required: true, validator: validateCode, trigger: 'blur' },
    18.         ],
    19.    }

    校验DNS服务器地址

    100.125.0.28,100.125.0.2 ,输入形式:多个地址以,隔开

     const checkIp = (rule, value, callback) => {

          // console.log(value, '输入的ip')

          let checkIp4 =

            /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/

          let valdata = value.split(/[,;\s]+/g)

          // console.log(valdata)

          let isCorrect = true

          if (valdata.length) {

            for (let i = 0; i < valdata.length; i++) {

              if (checkIp4.test(valdata[i]) == false) {

                isCorrect = false

              }

            }

          }

          if (value == null || value == '' || value == 'undefined') {

            return callback('请输入ip')

          } else if (!isCorrect) {

            callback(new Error('请输入正确的ip地址'))

          } else {

            callback()

          }

        }

    1. /**
    2.  * Created by PanJiaChen on 16/11/18.
    3.  */
    5. /**
    6.  * @param {string} path
    7.  * @returns {Boolean}
    8.  */
    9. export function isExternal(path) {
    10.   return /^(https?:|mailto:|tel:)/.test(path)
    11. }
    12.  
    13.  
    14. /**
    15.  * @param {string} url
    16.  * @returns {Boolean}
    17.  */
    18. export function validURL(url) {
    19.   const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
    20.   return reg.test(url)
    21. }
    23. /**
    24.  * @param {string} str
    25.  * @returns {Boolean}
    26.  */
    27. export function validLowerCase(str) {
    28.   const reg = /^[a-z]+$/
    29.   return reg.test(str)
    30. }
    32. /**
    33.  * @param {string} str
    34.  * @returns {Boolean}
    35.  */
    36. export function validUpperCase(str) {
    37.   const reg = /^[A-Z]+$/
    38.   return reg.test(str)
    39. }
    41. /**
    42.  * @param {string} str
    43.  * @returns {Boolean}
    44.  */
    45. export function validAlphabets(str) {
    46.   const reg = /^[A-Za-z]+$/
    47.   return reg.test(str)
    48. }
    50. /**
    51.  * @param {string} email
    52.  * @returns {Boolean}
    53.  */
    54. export function validEmail(email) {
    55.   const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    56.   return reg.test(email)
    57. }
    59. /**
    60.  * @param {string} str
    61.  * @returns {Boolean}
    62.  */
    63. export function isString(str) {
    64.   if (typeof str === 'string' || str instanceof String) {
    65.     return true
    66.   }
    67.   return false
    68. }
    70. /**
    71.  * @param {Array} arg
    72.  * @returns {Boolean}
    73.  */
    74. export function isArray(arg) {
    75.   if (typeof Array.isArray === 'undefined') {
    76.     return Object.prototype.toString.call(arg) === '[object Array]'
    77.   }
    78.   return Array.isArray(arg)
    79. }
    81. /**
    82.  * @param {Array} arg
    83.  * @returns {Boolean}
    84.  */
    85. export function ipaddress(IP) {
    86.   let partten = /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3}$/
    87.   if (IP && !partten.test(IP)) {
    88.     return false
    89.   }
    90.   return true
    91. }

    校验扫描IP的范围

    1.  <el-form-item label="扫描IP地址范围" prop="detectIpClone">
    2.         <div class="tagBox">
    3.           <div
    4.             class="tag"
    5.             v-for="(item, index) in form.detectIpClone"
    6.             :key="index"
    7.           >
    8.             网段:
    9.             <el-form-item
    10.               class="ml2"
    11.               :prop="'detectIpClone.' + index + '.startIp'"
    12.               :rules="rules.startIp"
    13.             >
    14.               <el-input
    15.                 placeholder="请输入起始IP"
    16.                 style="width: 150px"
    17.                 v-model="item.startIp"
    18.               ></el-input>
    19.             </el-form-item>
    20.             <span class="line">--</span>
    21.             <el-form-item
    22.               :prop="'detectIpClone.' + index + '.endIp'"
    23.               :rules="rules.endIp"
    24.             >
    25.               <el-input
    26.                 placeholder="请输入结束IP"
    27.                 style="width: 150px"
    28.                 v-model="item.endIp"
    29.               ></el-input>
    30.             </el-form-item>
    31.             <p
    32.               class="ml2"
    33.               v-if="mode != 'info'"
    34.               style="font-size: 14px; cursor: pointer"
    35.               @click="deleteFormTag('detectIpClone', index)"
    36.             >
    37.               <el-icon><DeleteFilled /></el-icon>
    38.             </p>
    39.           </div>
    40.           <p>
    41.             <span
    42.               class="ml2"
    43.               style="font-size: 14px; cursor: pointer"
    44.               v-if="mode != 'info'"
    45.               @click="addFormTag('detectIpClone')"
    46.               ><el-icon><CirclePlusFilled /></el-icon>&nbsp;添加范围</span
    47.             >
    48.           </p>
    49.         </div>
    50.       </el-form-item>

    规则对应部分

    startIp: [

              {

                required: true,

                trigger: "blur",

                message: "请输入起始IP",

              },

              {

                pattern:

                  /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3}$/,

                message: "请输入正确的IP格式",

                trigger: "blur",

              },

            ],

            endIp: [

              {

                required: true,

                trigger: "blur",

                message: "请输入结束IP",

              },

              {

                validator: this.validatorEndIP,

                trigger: "blur",

              },

            ],

    对应正则

    1.   validatorEndIP(rule, value, callback) {
    2.       let curIP = rule.field.split(".")[1];
    3.       let reg =
    4.         /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3}$/;
    5.       if (value == null || value == "" || value == "undefined") {
    6.         callback("请输入结束IP");
    7.       }
    8.       if (reg.test(value)) {
    9.         //比对结束IP不能小于开始IP
    10.         if (this.form.detectIpClone[curIP].startIp == value) {
    11.           callback("结束IP不能和开始IP一致!");
    12.         }
    13.         var arr_s = this.form.detectIpClone[curIP].startIp.split(".");
    14.         var arr_e = value.split(".");
    15.         let flag = null;
    16.         for (var i = 0; i < 4; i++) {
    17.           if (arr_s[i] < arr_e[i]) {
    18.             flag = true;
    19.           } else if (arr_s[i] == arr_e[i]) {
    20.             if (i == 3) {
    21.               flag = true;
    22.             }
    23.           } else {
    24.             flag = false;
    25.           }
    26.         }
    27.         if (flag == true) {
    28.           callback();
    29.         } else if (flag == false) {
    30.           callback("结束IP不能在开始IP之前！");
    31.         }
    32.       } else {
    33.         callback("请输入正确的IP地址");
    34.       }
    35.     },

    内容回显的时候

    扫描ip范围对应的字段涉及的内容;最好是使用另一个变量进行暂存;

    bug:添加完多条ip,出现变量污染的问题;原数据被修改;

      this.form.detectIpClone = [];

            let arr = this.form.detectIp.split(",");

            arr.map((item) => {

              let list = item.split("-");

              this.form.detectIpClone.push({

                startIp: list[0],

                endIp: list[1],

              });

            });

  • 相关阅读:
    Linux学习-59-备份还原数据命令(dump、restore、dd命令)
    如何使用Go与MQTT进行通信
    31、CSS进阶——@规则
    java计算机毕业设计家教信息管理系统（附源码、数据库）
    概率论的学习整理3： 概率的相关概念
    Linux下NANDFLASH probe函数分析
    IO 之 操作properties属性文件
    2021年度聚合支付评级如何？
    2. 资源管理
    【软件设计师-从小白到大牛】上午题基础篇：第一章 计算机组成与体系结构
  • 原文地址：https://blog.csdn.net/lf811/article/details/126607922