vue项目将表单验证规则统一于json文件中指定（“组件化”思想）

如题所示，由于项目需要，将验证规则不以之前的方式写死在代码中，而是从外面读取进来，便于控制修改，能做到一改全改。想想如果某个验证规则出了问题，而我们在多个组件中都用到了该验证规则，那岂不是要到每个组件中去修改。故立即推=>
虽然简单，但实现过程中还是出现了各种问题。好吧，最开始新建一个testRules.json文件：
//testRulses.json

{
    "ip":{
       "testrule":"/^(\sd|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/",
       "messageError": "请正确输入ip地址",
       "messageEmpty": "不能为空"
    },
    "netmask":{
       "testrule":"/^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/",
       "messageEmpty":"请正确输入子网掩码",
       "messageEmpty": "不能为空"
    },
    "bw":{
        "testrule":"",
        "messageEmpty":"不能为空"
    }
}

接着在组件中引入

import testRules from '../../testRules.json' //最初错误写法import {testRules} from '../../testRules.json'

注：引入import组件或者文件时，{}一般表明引入（或导入）模块中特定的块。例如那种错误的写法会无任务是从testRules中读取特定的testRules块或者方法！！所以，如果我们想要引入其中的部分块时，可以加{}，正如按需引入API中的方法时，我们常常是通过import {getX1，getX2…} from ‘xxx’。正确的方法是不加{}，而可以直接import的原因，又是因为组件中一般都有export default。但是这里的json文件是什么原因？？我还没有来得及仔细看

接着，在组件中的使用和原来的一样。直接在组件中使用（使用eval（）方法不知道有没有什么后遗症呀- -）：

    var validateBw = (rule,value,callback)=>{
       var exp = eval(testRules.bw.testrule); //这里需要通过eval()将原本的json对象验证属性testrule的value字符串形式转换为可执行的正则表达式object形式！！
       if(value ==""){
          callback(new Error(testRules.bw.messageEmpty));
       }
       if(exp.test(value) === false){
          callback(new Error(testRules.bw.messageError));
       }
       else{
          callback();
       }
    };
///////////////////////////////////////////////////////////////////////////////////
rulesRxform:{
  bw:[{required:true,validator:validateBw,trigger:'blur'}]
}

上面一开始没有使用eval进行所谓的转换，然后发现一直没有效果，打印出来，如下面所示，明显看到直接通过json取到的testrules是一个字符串，因此在使用它进行正则匹配会报错！当然就需要转换后再使用了。
这里写图片描述

以为，这样子已经准确无误了，直接编译查看验证效果。然而，json文件报错！

这里还有另一个注意点，json文件中需要对一些特殊字符进行转义，json中需要转义的字符有：“/ \ b f n r t”。 因此修改json文件如下：

{
    "ip":{
     //对正则表达式中涉及到的“/”“\ ”进行转义！！
       "testrule":"\/^(\\sd|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])$\/",
       "messageError": "请正确输入ip地址",
       "messageEmpty": "不能为空"
    },
    "netmask":{
       "testrule":"\/^(254|252|248|240|224|192|128|0)\\.0\\.0\\.0|255\\.(254|252|248|240|224|192|128|0)\\.0\\.0|255\\.255\\.(254|252|248|240|224|192|128|0)\\.0|255\\.255\\.255\\.(254|252|248|240|224|192|128|0)$\/",
       "messageEmpty":"请正确输入子网掩码",
       "messageEmpty": "不能为空"
    },
    "bw":{
        "testrule":"",
        "messageEmpty":"不能为空"
    }
}

这下子就正确了，初步写了简单的验证，后续大概的项目就大概这样实现了。
补充：再小小补充一点，Json字符串和Json对象的区别。一个是字符串当然就有“”了。正如本项目中的json文件中，内容是以json数据形式的对象的形式存在的（最开始傻傻的我还用了JSNO.parse妄想进行转换，天真！）。

vue项目将表单验证规则统一于json文件中指定（“组件化”思想）

猜你喜欢